/* Text Cleaner — tool styles.
   Every value from a design token (§4.2). Scoped to .ftb-tool-tc. */

/* --------------------------------------------------------------- presets */

.ftb-tool-tc .ftb-tc-presets{margin-bottom:var(--ftb-space-5);
  padding:var(--ftb-space-4) var(--ftb-space-5);background:var(--ftb-surface-2);
  border-radius:var(--ftb-radius)}
.ftb-tool-tc .ftb-tc-presets-label{display:block;margin-bottom:var(--ftb-space-3);
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi);color:var(--ftb-text)}
.ftb-tool-tc .ftb-tc-presetbtns{display:flex;flex-wrap:wrap;gap:var(--ftb-space-2)}
.ftb-tool-tc .ftb-tc-preset{padding:0 var(--ftb-space-4);min-height:var(--ftb-tap);
  font:inherit;font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-medium);
  color:var(--ftb-text);background:var(--ftb-surface);
  border:1px solid var(--ftb-border-interactive);border-radius:var(--ftb-radius-full);
  cursor:pointer}
.ftb-tool-tc .ftb-tc-preset:hover{border-color:var(--ftb-primary);color:var(--ftb-primary)}
.ftb-tool-tc .ftb-tc-preset[aria-pressed=true]{background:var(--ftb-primary);
  color:var(--ftb-on-primary);border-color:var(--ftb-primary)}
.ftb-tool-tc .ftb-tc-preset:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:2px}
.ftb-tool-tc .ftb-tc-presets .ftb-tool-stat{margin-top:var(--ftb-space-3);min-height:1.4em}

/* ----------------------------------------------------------------- panes */

/* Side by side once there is room. Below that they stack, and the cleaned
   pane sits under the input where the eye already is. */
.ftb-tool-tc .ftb-tc-panes{display:grid;gap:var(--ftb-space-4);
  grid-template-columns:1fr}
@media (min-width:900px){
  .ftb-tool-tc .ftb-tc-panes{grid-template-columns:1fr 1fr}
}
.ftb-tool-tc .ftb-tc-panes > *{min-width:0;margin-bottom:0}
.ftb-tool-tc textarea{min-height:16rem;font-family:var(--ftb-mono);
  font-size:var(--ftb-text-code);line-height:1.6}
.ftb-tool-tc textarea[readonly]{background:var(--ftb-surface-2)}

/* ------------------------------------------------------------ operations */

.ftb-tool-tc .ftb-tc-ops{margin:var(--ftb-space-5) 0;
  border:1px solid var(--ftb-border);border-radius:var(--ftb-radius);
  background:var(--ftb-surface)}
.ftb-tool-tc .ftb-tc-ops summary{padding:var(--ftb-space-3) var(--ftb-space-4);
  min-height:var(--ftb-tap);display:flex;align-items:center;cursor:pointer;
  font-size:var(--ftb-text-sm);font-weight:var(--ftb-fw-semi)}
.ftb-tool-tc .ftb-tc-ops summary:focus-visible{outline:2px solid var(--ftb-primary);
  outline-offset:-2px}
.ftb-tool-tc .ftb-tc-opsbody{padding:0 var(--ftb-space-4) var(--ftb-space-4);
  display:grid;gap:var(--ftb-space-2) var(--ftb-space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.ftb-tool-tc .ftb-tc-op{display:flex;align-items:center;gap:var(--ftb-space-2);
  min-height:var(--ftb-tap);font-size:var(--ftb-text-sm);cursor:pointer}
/* 24px, per WCAG 2.2 SC 2.5.8 and §9. */
.ftb-tool-tc .ftb-tc-op input{width:24px;height:24px;flex:none;
  accent-color:var(--ftb-primary);cursor:pointer}

/* --------------------------------------------------------- what changed */

.ftb-tool-tc .ftb-tc-idle{margin:var(--ftb-space-5) 0 0;
  padding:var(--ftb-space-8) var(--ftb-space-5);text-align:center;
  border:2px dashed var(--ftb-border-strong);border-radius:var(--ftb-radius-lg);
  font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}

/* The panel that justifies the tool. Success colouring because a report of
   work done is good news, and this pair is contrast-checked in both themes
   by core.css. */
.ftb-tool-tc .ftb-tc-changed{margin-top:var(--ftb-space-5);
  padding:var(--ftb-space-4) var(--ftb-space-5);
  background:var(--ftb-success-soft);color:var(--ftb-success);
  border:1px solid currentColor;border-left-width:4px;border-radius:var(--ftb-radius)}
.ftb-tool-tc .ftb-tc-changed h3{margin:0;font-size:var(--ftb-text-base);
  letter-spacing:var(--ftb-ls-tight);color:inherit}

.ftb-tool-tc .ftb-tc-steps{list-style:none;margin:var(--ftb-space-3) 0 0;padding:0;
  display:grid;gap:var(--ftb-space-2);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.ftb-tool-tc .ftb-tc-steps li{display:flex;align-items:baseline;
  gap:var(--ftb-space-3);font-size:var(--ftb-text-sm);
  line-height:var(--ftb-lh-snug);color:var(--ftb-text)}
.ftb-tool-tc .ftb-tc-count{flex:none;min-width:3ch;text-align:right;
  font-weight:var(--ftb-fw-bold);font-variant-numeric:tabular-nums;color:inherit}

.ftb-tool-tc .ftb-tc-stats{display:grid;gap:var(--ftb-space-2) var(--ftb-space-5);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));
  margin:var(--ftb-space-4) 0 0;padding-top:var(--ftb-space-4);
  border-top:1px solid currentColor}
.ftb-tool-tc .ftb-tc-stats > div{min-width:0}
.ftb-tool-tc .ftb-tc-stats dt{font-size:var(--ftb-text-sm);color:var(--ftb-text-muted)}
.ftb-tool-tc .ftb-tc-stats dd{margin:0;font-size:var(--ftb-text-base);
  font-weight:var(--ftb-fw-semi);color:var(--ftb-text);
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.ftb-tool-tc .ftb-tc-warnings{margin-top:var(--ftb-space-4);
  padding:var(--ftb-space-4) var(--ftb-space-5);background:var(--ftb-warning-soft);
  border-radius:var(--ftb-radius)}
.ftb-tool-tc .ftb-tc-warnings ul{margin:0;padding-left:var(--ftb-space-5);
  font-size:var(--ftb-text-sm);line-height:var(--ftb-lh-snug);color:var(--ftb-text)}

.ftb-tool-tc .ftb-tool-disclaimer{margin:var(--ftb-space-6) 0 0;
  padding: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)}

/* ------------------------------------------------------------ narrow UI */

@media (max-width:479px){
  .ftb-tool-tc .ftb-tc-preset{flex:1 1 auto}
  .ftb-tool-tc textarea{min-height:11rem}
  .ftb-tool-tc .ftb-tc-idle{padding:var(--ftb-space-5) var(--ftb-space-4)}
  .ftb-tool-tc .ftb-tool-actions .ftb-btn{flex:1 1 auto}
}