/* ck-utilities.css — Welle-K Phase-D Inline-Style Mass-Extraction
   Atomic CSS classes for high-frequency inline style="..." patterns
   across index.html, assets/ck-app.js and assets/ck-app/part-*.js.

   Naming convention follows existing assets/ck-theme.css `u-` prefix
   to avoid collisions. New classes added here ONLY when not already
   present in ck-theme.css. Created 2026-05-09. Cache-bust ?v=welleK.

   Design notes:
   - No new colors introduced. All hex values are literal copies of
     values already used in JS templates (see audit at
     assets/css/inline-extract-audit.txt).
   - Variables encapsulate the most reused hex values for future
     theme work, but the hardcoded fallbacks remain identical to the
     pre-extraction inline styles.
*/

:root {
  --ck-c-text:        #e8f4ff;
  --ck-c-bull:        #00ff94;
  --ck-c-bear:        #ff4d6a;
  --ck-c-warn:        #ffe033;
  --ck-c-cyan:        #00d9ff;
  --ck-c-purple:      #a855f7;
  --ck-c-orange:      #ff9944;
  --ck-c-orange-2:    #ff6b2b;
  --ck-c-magenta:     #ff3366;
  --ck-c-amber:       #fbbf24;
  --ck-c-amber-2:     #ffc800;
  --ck-c-link:        #0077aa;
  --ck-c-steel:       #4a8fa8;
  --ck-c-slate:       #5a7a9a;
  --ck-c-slate-2:     #5a8aaa;
  --ck-c-slate-3:     #7a9ab8;
  --ck-c-slate-4:     #94a3b8;
  --ck-c-slate-d:     #4a6a88;
  --ck-c-ink:         #1a2a3a;
  --ck-c-bar-bg:      #1e2d44;
}

/* ─── Display / visibility additions ─── */
.u-display-none      { display:none; }   /* alias for .u-hide, used in fresh JS templates */

/* ─── Padding / margin atoms (needed for top patterns) ─── */
.u-p-8               { padding:8px; }
.u-p-5-8             { padding:5px 8px; }
.u-p-5-6             { padding:5px 6px; }
.u-p-3-8             { padding:3px 8px; }
.u-mt-4              { margin-top:4px; }
.u-mb-4              { margin-bottom:4px; }
.u-mb-18             { margin-bottom:18px; }

/* ─── Text alignment ─── */
.u-text-center       { text-align:center; }
.u-text-right        { text-align:right; }

/* ─── Cursor variants ─── */
.u-cursor-help       { cursor:help; }

/* ─── Opacity ─── */
.u-op-40             { opacity:.4; }   /* covers both `0.4` and `.4` */

/* ─── Single-property color shorthands not yet in ck-theme.css ─── */
.u-c-red             { color:#ff4d6a; }
.u-c-magenta         { color:#ff3366; }
.u-c-orange-2        { color:#ff6b2b; }
.u-c-orange-soft     { color:#ff9944; }
.u-c-amber-2         { color:#ffc800; }
.u-c-amber-soft      { color:#fbbf24; }
.u-c-link            { color:#0077aa; }
.u-c-steel-2         { color:#4a8fa8; }
.u-c-slate-d         { color:#4a6a88; }
.u-c-slate-2         { color:#5a8aaa; }
.u-c-slate-3         { color:#7a9ab8; }
.u-c-slate-4         { color:#94a3b8; }

/* ─── Font size atoms ─── */
.u-fs-11             { font-size:11px; }
.u-fs-14             { font-size:14px; }
.u-fs-16             { font-size:16px; }

/* ─── Compound: padded TD cells (table cells in result tables) ─── */
.u-td-pad-r          { padding:8px; text-align:right; }
.u-td-pad-c          { padding:8px; text-align:center; }
.u-td-pad-bold       { padding:8px; font-weight:600; }

/* ─── Misc layout ─── */
.u-bd-bottom         { border-bottom:1px solid var(--border); }
.u-flex-between-plain { display:flex; justify-content:space-between; }
.u-flex-between-c     { display:flex; justify-content:space-between; align-items:center; }
.u-flex-row-cg6      { display:flex; align-items:center; gap:6px; }

/* ─── Ladder / progress bar shell (16x reused) ─── */
.u-bar-shell         { flex:1; height:5px; background:#1e2d44; border-radius:3px; overflow:hidden; }

/* ─── Mono font compound atoms (top hits 100/54/46/18) ─── */
.u-mono-7-muted      { font-family:var(--mono); font-size:7px; color:var(--muted); }
.u-mono-8-muted      { font-family:var(--mono); font-size:8px; color:var(--muted); }
.u-mono-9-muted      { font-family:var(--mono); font-size:9px; color:var(--muted); }
.u-mono-11-slate-2   { font-family:var(--mono); font-size:11px; color:#5a8aaa; }

/* ─── Mono+muted+size compound (used in 22/20 hit patterns) ─── */
.u-fs-11-muted-mt    { font-size:11px; color:var(--muted); margin-top:4px; }

/* ─── Edge: small label headers ─── */
.u-label-blk-9-up    { text-align:left; padding:4px 6px; font-weight:700; font-size:9px; letter-spacing:1px; }

/* ─── Pre-built ladder-row chip seen 12x ─── */
.u-chip-dim          { text-align:center; background:rgba(0,0,0,.2); border-radius:4px; padding:3px; }

/* ─── Cell with light border (12x) ─── */
.u-cell-light        { padding:5px; border:1px solid #ddd; color:#1a2a3a; }
.u-cell-link         { padding:3px 8px; color:#5a7a9a; }

/* ─── Vertical separator dot used inline 12x ─── */
.u-vsep              { width:1px; height:12px; background:var(--border); display:inline-block; margin:0 3px; vertical-align:middle; }

/* ─── Atoms used in compound classes ─── */
.u-fw-700            { font-weight:700; }
.u-fs-7              { font-size:7px; }
.u-fs-8              { font-size:8px; }
.u-fs-9              { font-size:9px; }
.u-c-666             { color:#666; }

/* ─── Compound: mono+slate-d (font-family compound) ─── */
.u-mono-8-slate-d    { font-family:var(--mono); font-size:8px; color:#4a6a88; }
.u-mono-11-yellow-c  { font-family:var(--mono); font-size:11px; color:#ffe033; text-align:center; }
.u-mono-9-slate-2-r  { font-family:var(--mono); font-size:9px; color:#5a8aaa; text-align:right; }
.u-mono-9-slate-2-c  { font-family:var(--mono); font-size:9px; color:#5a8aaa; text-align:center; }
/* note: .u-mono-11-muted-mt2 is defined in ck-theme.css line 43 */

/* ─── Cyan ghost button family ─── */
.u-btn-ghost-cyan,
.u-btn-ghost-cyan-7-w5,
.u-btn-ghost-cyan-8-w5 {
  border-radius:3px;
  border:1px solid rgba(0,217,255,.2);
  background:transparent;
  color:rgba(0,217,255,.4);
  cursor:pointer;
  font-family:var(--mono);
}
.u-btn-ghost-cyan       { font-size:7px; padding:1px 4px; }
.u-btn-ghost-cyan-7-w5  { font-size:7px; padding:1px 5px; }
.u-btn-ghost-cyan-8-w5  { font-size:8px; padding:1px 5px; }

/* ─── Mono pill links / chips ─── */
.u-pill-cyan-link {
  font-family:var(--mono); font-size:8px; padding:2px 6px;
  border-radius:3px; background:rgba(0,217,255,.07);
  border:1px solid rgba(0,217,255,.2); color:#00d9ff;
  text-decoration:none;
}
.u-mono-8-muted-help { font-family:var(--mono); font-size:8px; color:var(--muted); cursor:help; }

/* ─── Empty-state placeholder ─── */
.u-empty-mono-c { text-align:center; padding:40px; font-family:var(--mono); color:var(--muted); }
.u-error-block  { padding:32px; text-align:center; color:#e74c3c; }

/* ─── Misc compound flex / layout (≥10 hits) ─── */
.u-flex-col-g3              { display:flex; flex-direction:column; gap:3px; }
.u-flex-col-g3-indent       { margin:6px 0 6px 14px; display:flex; flex-direction:column; gap:3px; }
.u-flex-row-g3-c            { display:flex; gap:3px; align-items:center; }
.u-flex-row-cg8-wrap        { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.u-flex-1-min0              { flex:1; min-width:0; }
.u-mono-12-b-orange-2       { font-family:var(--mono); font-size:12px; font-weight:700; color:#ff6b2b; }
.u-bd-color-ddd             { border-color:#ddd; }
.u-pill-green-soft          { background:#00ff9418; border:1px solid #00ff9444; color:#00ff94; }