/* ============================================================================
   Remove Line Breaks / Whitespace Cleaner — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — cyan, measured against base.css surfaces (WCAG relative luminance):
     dark  #61e4ef  12.47:1 on --bg   11.51:1 on --surface   12.91:1 on --bg-sunk
     light #20777e   5.03:1 on --bg    5.25:1 on --surface    4.61:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes — light
   on --bg-sunk is the tightest pairing here (4.61:1), so nothing uses --accent
   as body text against a sunk panel in light mode.
   ========================================================================= */
:root { --accent: #61e4ef; --accent-dim: rgba(97, 228, 239, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #20777e; --accent-dim: rgba(32, 119, 126, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* ============================================================================
   The cleaner itself — two panes (input / output) over a shared options bar.
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.panes {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  margin-bottom: 1.25rem;
}

.pane textarea {
  display: block;
  width: 100%;
  min-height: 14rem;
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.5;
  background: var(--surface);
  tab-size: 4;
}
.pane textarea[readonly] { color: var(--text-dim); }

.pane-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-faint);
}
.pane-stats strong { color: var(--text-dim); font-weight: 600; }

/* ------------------------------------------------------------- options -- */

.options {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 0 0;
  margin-bottom: 1.1rem;
  border-top: 1px solid var(--line);
}

.opt {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: 0.9375rem;
  cursor: pointer;
}
.opt input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
}

.opt-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: -0.15rem 0 0.15rem 1.6rem;
  padding-left: 0.65rem;
  border-left: 2px solid var(--line);
  transition: opacity 0.12s ease;
}
.opt-sub[data-disabled="true"] { opacity: 0.45; }
.opt-sub label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84375rem;
  color: var(--text-dim);
  cursor: pointer;
}
.opt-sub input[type="radio"] { width: auto; margin: 0; accent-color: var(--accent); }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.copy-status {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ok);
}
.copy-status.is-err { color: var(--err); }

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.example,
.pagelinks a {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.example { margin: 0 0 1rem; }
.example h3 { margin-top: 0; }
.example p:last-child { margin-bottom: 0; }

.before-after {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  margin: 0.75rem 0;
}
.before-after > div {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
}
.before-after .lbl {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.35rem;
}
.before-after pre {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  white-space: pre-wrap;
  font-size: 0.8125rem;
  width: auto;
}

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a { display: block; text-decoration: none; }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }
.pagelinks a:hover { border-color: var(--accent); }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}