/* CoastFIRE Calculator — tool styles.
   Scoped to .ftb-tool-cf, every value a token (§4.2). Inputs, buttons,
   messages, table scrolling and focus outlines come from core.css and the theme. Kept small: core.css and
   style.css already transfer about 11,000 of the 12,288-byte budget (§10). */

.ftb-tool-cf .ftb-cf-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-cf legend{padding:0 var(--ftb-space-2);font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold)}
.ftb-tool-cf .ftb-cf-grid{display:grid;gap:0 var(--ftb-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.ftb-tool-cf .ftb-field{margin-bottom:var(--ftb-space-4);min-width:0}
.ftb-tool-cf [aria-invalid=true]{border-color:var(--ftb-error)}

/* ---------------------------------------------------------------- results */

/* Height reserved so the first result never shifts the page (§10). */
.ftb-tool-cf .ftb-cf-results{min-height:calc(var(--ftb-space-24) + var(--ftb-space-16))}

.ftb-tool-cf .ftb-cf-headline{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--ftb-space-3);
  padding:var(--ftb-space-4) var(--ftb-space-5);background:var(--ftb-surface-2);border-radius:var(--ftb-radius)}
.ftb-tool-cf .ftb-cf-big{margin:0;font-size:var(--ftb-text-3xl);font-weight:var(--ftb-fw-bold);
  color:var(--ftb-primary);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* Status is carried by the word, never by colour alone (§9). */
.ftb-tool-cf .ftb-cf-status{margin:0;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-bold);
  padding:var(--ftb-space-1) var(--ftb-space-3);border-radius:var(--ftb-radius);border:1px solid var(--ftb-border-strong)}
.ftb-tool-cf .ftb-cf-status.is-reached{color:var(--ftb-success);border-color:var(--ftb-success)}
.ftb-tool-cf .ftb-cf-summary{margin:var(--ftb-space-3) 0 var(--ftb-space-4)}

.ftb-tool-cf .ftb-cf-boxes{display:grid;gap:var(--ftb-space-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.ftb-tool-cf .ftb-cf-box{padding:var(--ftb-space-4);background:var(--ftb-surface);
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);min-width:0}
.ftb-tool-cf .ftb-cf-k{margin:0;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-text-muted)}
.ftb-tool-cf .ftb-cf-v{margin:var(--ftb-space-1) 0 0;font-size:var(--ftb-text-xl);font-weight:var(--ftb-fw-bold);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

/* ------------------------------------------------------------------ chart */

.ftb-tool-cf .ftb-cf-figure{margin:var(--ftb-space-5) 0 0}
.ftb-tool-cf .ftb-cf-chart svg{display:block;width:100%;height:220px;
  background:var(--ftb-surface);border:1px solid var(--ftb-border);border-radius:var(--ftb-radius)}
.ftb-tool-cf .ftb-cf-line{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.ftb-tool-cf .ftb-cf-line--coast{stroke:var(--ftb-text-muted);stroke-dasharray:5 4}
.ftb-tool-cf .ftb-cf-line--stop{stroke:var(--ftb-primary)}
.ftb-tool-cf .ftb-cf-line--save{stroke:var(--ftb-success)}
.ftb-tool-cf .ftb-cf-swatch--coast{border-top-color:var(--ftb-text-muted);border-top-style:dashed}
.ftb-tool-cf .ftb-cf-swatch--stop{border-top-color:var(--ftb-primary)}
.ftb-tool-cf .ftb-cf-swatch--save{border-top-color:var(--ftb-success)}

.ftb-tool-cf .ftb-cf-legend{list-style:none;margin:var(--ftb-space-3) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--ftb-space-2) var(--ftb-space-4);
  font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-tool-cf .ftb-cf-legend li{display:flex;align-items:center;gap:var(--ftb-space-2)}
.ftb-tool-cf .ftb-cf-swatch{width:1.5rem;height:0;border-top-width:3px;border-top-style:solid;flex:none}

/* ------------------------------------------------------- working and table */

.ftb-tool-cf .ftb-cf-work{margin-top:var(--ftb-space-4)}
.ftb-tool-cf .ftb-cf-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-cf .ftb-cf-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-cf .ftb-cf-steps li + li{margin-top:var(--ftb-space-2)}

.ftb-tool-cf .ftb-cf-table{width:100%;border-collapse:collapse;font-size:var(--ftb-text-sm);
  font-variant-numeric:tabular-nums}
.ftb-tool-cf .ftb-cf-table th,
.ftb-tool-cf .ftb-cf-table td{padding:var(--ftb-space-2) var(--ftb-space-3);text-align:start;
  border-bottom:1px solid var(--ftb-border)}
.ftb-tool-cf .ftb-cf-table tbody th{font-weight:var(--ftb-fw-medium);white-space:nowrap}
.ftb-tool-cf .ftb-cf-table .is-num{text-align:end;white-space:nowrap}

.ftb-tool-cf .ftb-cf-disclaimer{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);
  line-height:var(--ftb-lh-snug);color:var(--ftb-text-muted)}

@media (max-width:479px){
  .ftb-tool-cf .ftb-cf-set{padding:var(--ftb-space-3)}
  .ftb-tool-cf .ftb-cf-chart svg{height:180px}
}