/* DOTS Calculator, tool styles.
   Scoped to .ftb-tool-dt, every value a token (section 4.2). Inputs, labels,
   option rows, buttons, messages and tables come from core.css and the
   theme; this file only adds what is new, and stays small because the page
   CSS budget is nearly spent (section 10). */

.ftb-tool-dt .ftb-dt-set{margin:0 0 var(--ftb-space-5);padding:var(--ftb-space-4) var(--ftb-space-5);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);background:var(--ftb-surface);min-width:0}
.ftb-tool-dt legend{padding:0 var(--ftb-space-2);font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold)}
.ftb-tool-dt .ftb-field{min-width:0}
.ftb-tool-dt .ftb-dt-grid{display:grid;gap:0 var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr))}
.ftb-tool-dt [aria-invalid=true]{border-color:var(--ftb-error)}

/* Height reserved so the first result never shifts the page (section 10). */
.ftb-tool-dt .ftb-dt-results{min-height:calc(var(--ftb-space-24) + var(--ftb-space-16))}
.ftb-tool-dt .ftb-dt-h{margin:0 0 var(--ftb-space-3);font-size:var(--ftb-text-lg);font-weight:var(--ftb-fw-semi)}
.ftb-tool-dt .ftb-dt-h3{margin:var(--ftb-space-5) 0 var(--ftb-space-2);font-size:var(--ftb-text-sm);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
/* DOTS and IPF GL side by side, stacked on a phone. */
.ftb-tool-dt .ftb-dt-pair{display:grid;gap:var(--ftb-space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.ftb-tool-dt .ftb-dt-card{padding:var(--ftb-space-4) var(--ftb-space-5);background:var(--ftb-surface-2);border-radius:var(--ftb-radius);min-width:0}
.ftb-tool-dt .ftb-dt-k{margin:0;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-tool-dt .ftb-dt-big{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-3xl);font-weight:var(--ftb-fw-bold);
  color:var(--ftb-primary);line-height:1.1;font-variant-numeric:tabular-nums}
.ftb-tool-dt .ftb-dt-alt{color:var(--ftb-text)}
/* A text label for a radio group, styled like the real labels. */
.ftb-tool-dt .ftb-dt-lab{display:block;margin-bottom:var(--ftb-space-2);font-weight:var(--ftb-fw-semi)}
.ftb-tool-dt .is-goal>*{font-weight:var(--ftb-fw-bold)}
.ftb-tool-dt .ftb-dt-sub{margin:var(--ftb-space-3) 0 0}
.ftb-tool-dt .ftb-dt-warn{margin:var(--ftb-space-3) 0 0;padding:var(--ftb-space-3) var(--ftb-space-4);
  border-inline-start:3px solid var(--ftb-warning);background:var(--ftb-surface);font-size:var(--ftb-text-sm)}
.ftb-tool-dt .ftb-dt-table{width:100%;font-size:var(--ftb-text-sm);font-variant-numeric:tabular-nums}

.ftb-tool-dt .ftb-dt-work{margin-top:var(--ftb-space-4)}
.ftb-tool-dt .ftb-dt-work summary{display:flex;align-items:center;min-height:var(--ftb-tap);cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-primary)}
.ftb-tool-dt .ftb-dt-steps{margin:var(--ftb-space-3) 0 0;padding-inline-start:var(--ftb-space-6);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug)}
.ftb-tool-dt .ftb-dt-steps li+li{margin-top:var(--ftb-space-2)}
.ftb-tool-dt .ftb-dt-note{margin:var(--ftb-space-6) 0 0;padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-surface-2);border-radius:var(--ftb-radius);font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

@media (max-width:479px){
  .ftb-tool-dt .ftb-dt-set{padding:var(--ftb-space-3)}
}