/* ==========================================================================
   CSS Minifier & Beautifier
   ========================================================================== */

.cm-input { min-height: 320px; font: 0.86rem/1.6 var(--font-mono); white-space: pre; tab-size: 2; }

.cm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.cm-mode { width: 100%; }
.cm-mode .icon { width: 18px; height: 18px; }

.cm-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.cm-license { padding-bottom: 0.45rem; }
.cm-license code {
  padding: 0.05rem 0.35rem;
  border-radius: 6px;
  background: var(--field-bg);
  border: 1px solid var(--border);
  font: 0.8rem var(--font-mono);
  white-space: nowrap;
}

.cm-status {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin: -0.4rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cm-status[hidden] { display: none; }
.cm-status .icon { flex: none; width: 18px; height: 18px; margin-top: 0.1rem; stroke-width: 2.4; }
.cm-status.is-warn { border: 1px solid rgba(245, 158, 11, 0.35); background: rgba(245, 158, 11, 0.08); color: var(--warn-text); }
.cm-status strong { color: inherit; }

.cm .stat.is-good strong { color: var(--success-text); }

.cm-code {
  max-height: 560px;
  margin: 0;
  padding: 1rem 1.1rem;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--text);
  font: 0.84rem/1.65 var(--font-mono);
  white-space: pre;
  tab-size: 2;
}
/* Minified CSS is one long line, so let it wrap instead of scrolling sideways. */
.cm-code.is-wrap { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.cm-code:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.cm-note { margin: 0; color: var(--text-2); font-size: 0.86rem; }
.cm-note[hidden] { display: none; }

/* Syntax colours */
.cm-sel { color: var(--code-k); }
.cm-at { color: var(--pink); font-weight: 600; }
.cm-prop { color: var(--code-f); }
.cm-str { color: var(--code-s); }
.cm-num { color: #f59e0b; }
.cm-fn { color: var(--code-f); }
.cm-imp { color: var(--danger); font-weight: 600; }
.cm-com { color: var(--muted); font-style: italic; }
.cm-p { color: var(--muted); }
:root[data-theme="light"] .cm-num { color: #b45309; }
:root[data-theme="light"] .cm-at { color: #be185d; }