/* Workstream E batch 1 — tool-specific styles (jwt.js, regex.js, color.js, cron.js).
   Use component classes from components.css first; only what components
   cannot express goes here. Tokens only — no raw colors. */

/* ---- shared: single-column tool layout (color, cron) ---- */
.color-col{display:grid;gap:12px;max-width:720px}

/* ---- JWT ---- */
.toolbar-flush{margin-bottom:0}

/* ---- Regex ---- */
.regex-pattern-card .pane-body,
.regex-pattern-body{display:grid;gap:10px;padding:12px 14px}
.regex-pattern-row{display:flex;align-items:center;background:var(--card);border:1px solid var(--stroke);border-bottom:1px solid var(--stroke-strong);border-radius:var(--r-control);overflow:hidden}
.regex-slash{padding:0 2px 0 10px;color:var(--text-3);font-family:var(--font-mono);font-size:15px}
.regex-slash:last-of-type{padding:0 4px}
.regex-pattern-input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-family:var(--font-mono);font-size:14px;color:var(--accent-text);padding:7px 4px;height:32px}
.regex-flags-input{width:70px;background:transparent;border:0;border-left:1px solid var(--stroke);outline:none;font-family:var(--font-mono);font-size:14px;color:var(--warn);padding:7px 10px;height:32px}
.regex-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.regex-quick-label{font-size:12px;color:var(--text-3)}
.regex-gen-row,.regex-replace-row{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--stroke-card)}
.regex-gen-row .input,.regex-replace-row .input{flex:1;min-width:200px}
.regex-highlighted{padding:12px 14px;font:13px/20px var(--font-mono);white-space:pre-wrap;word-break:break-word}
.regex-highlighted mark.regex-match{background:var(--accent-soft);color:var(--accent-text);border-radius:3px;padding:0 1px}
.regex-truncated{padding:0 14px 12px;color:var(--text-3);font-size:12px}
.regex-hint{margin:0 0 6px;color:var(--text-3);font-size:12px}
.regex-cases-actions{display:flex;align-items:center;gap:10px;padding:0 14px 10px}
.regex-case-results{display:grid;gap:4px;padding:0 14px 14px;font-size:13px}
.regex-case-row{display:flex;align-items:center;gap:6px}
.regex-lib-group{margin-bottom:10px}
.regex-lib-cat{font-size:12px;font-weight:600;color:var(--text-3);margin-bottom:6px}
.regex-lib-items{display:flex;flex-wrap:wrap;gap:6px}
.regex-ai-panel{margin-bottom:10px}

/* ---- Color ---- */
.color-swatch{width:32px;height:32px;border-radius:var(--r-control);border:1px solid var(--stroke);flex:none}
.color-native-picker{width:44px;height:32px;padding:2px;cursor:pointer}
.color-hex-quick{width:110px;font-family:var(--font-mono)}
.color-triple{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end;padding:12px 14px}
.color-triple-2{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.color-contrast-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.color-contrast-preview{width:64px;height:44px;border-radius:var(--r-control);border:1px solid var(--stroke);display:grid;place-items:center;font-weight:600;font-size:14px}
.color-contrast-ratio{font-family:var(--font-mono);font-size:20px;color:var(--accent-text)}
.color-contrast-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:13px}
.color-palette-output{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.color-palette-item{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.color-palette-item span{font-size:10px;font-family:var(--font-mono);color:var(--text-3)}
.color-palette-swatch{width:48px;height:48px;border-radius:var(--r-control);border:1px solid var(--stroke);transition:transform var(--dur-fast) var(--ease)}
.color-palette-item:hover .color-palette-swatch{transform:scale(1.08)}

/* ---- Cron ---- */
.cron-expr-input{font-family:var(--font-mono);font-size:16px;text-align:center;letter-spacing:2px;height:44px}
.cron-field-labels{display:flex;justify-content:center;gap:4px;font-size:11px;color:var(--text-3);font-family:var(--font-mono)}
.cron-field-labels span{width:64px;text-align:center}
.cron-presets{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cron-presets-label{font-size:12px;color:var(--text-3);align-self:center}
.cron-description{margin:0 0 12px;font-size:15px;color:var(--text);line-height:1.6}

@media (max-width:760px){
  .color-triple,.color-triple-2{grid-template-columns:1fr}
  .panes{grid-template-columns:minmax(0,1fr)}
}