/* ============================================================
   MustKit — UI mockup primitives (token-only, light/dark valid)
   Pure HTML/CSS/SVG. Fills service-detail image slots. No images.
   ============================================================ */

/* frame that fills a slot (keeps the slot's aspect-ratio) */
.mock {
  position: relative; height: 100%; width: 100%;
  background: var(--jk-bg-elevated); border: 1px solid var(--jk-border);
  border-radius: var(--jk-radius-lg); box-shadow: var(--jk-shadow-md);
  overflow: hidden; display: flex; flex-direction: column;
  font-family: var(--jk-font); font-size: 11px; line-height: 1.4; color: var(--jk-text);
}
.mock * { box-sizing: border-box; }

/* browser / app chrome bar */
.mock__chrome { height: 28px; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; background: var(--jk-bg-subtle); border-bottom: 1px solid var(--jk-border); }
.mock__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--jk-border); flex: none; }
.mock__url { margin-left: 6px; flex: 1; height: 15px; border-radius: 999px; background: var(--jk-bg); border: 1px solid var(--jk-border); display: flex; align-items: center; padding: 0 9px; font-size: 8.5px; color: var(--jk-text-muted); overflow: hidden; white-space: nowrap; }
.mock__tab { font-size: 9px; font-weight: 600; color: var(--jk-text-muted); padding: 0 7px; }
.mock__tab--on { color: var(--jk-primary); }

.mock__body { flex: 1; padding: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.mock__body--split { flex-direction: row; }
.mock__caption { flex: none; padding: 7px 12px; border-top: 1px solid var(--jk-border); background: var(--jk-bg-subtle); font-size: 9.5px; font-weight: 600; color: var(--jk-text-muted); display: flex; align-items: center; gap: 6px; }
.mock__caption svg { width: 12px; height: 12px; color: var(--jk-primary); }

/* mini heading rows */
.m-h { font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
.m-sub { color: var(--jk-text-muted); font-size: 9.5px; }
.m-row { display: flex; align-items: center; gap: 7px; }
.m-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.m-col { display: flex; flex-direction: column; }
.m-grow { flex: 1; min-width: 0; }
.m-muted { color: var(--jk-text-muted); }
.m-strong { font-weight: 700; }

/* wp-admin left rail (inverts in dark via tokens, like the footer) */
.mock__wp { width: 34%; max-width: 150px; flex: none; background: var(--jk-text); color: var(--jk-bg); padding: 10px 8px; display: flex; flex-direction: column; gap: 3px; }
.mock__wp-brand { font-size: 10px; font-weight: 800; color: var(--jk-bg); padding: 2px 6px 8px; display: flex; align-items: center; gap: 6px; }
.mock__wp-item { font-size: 9.5px; padding: 5px 7px; border-radius: 5px; color: color-mix(in srgb, var(--jk-bg) 62%, var(--jk-text)); }
.mock__wp-item--on { background: var(--jk-primary); color: var(--jk-on-primary); font-weight: 600; }

/* generic tile / card inside a mock */
.m-card { border: 1px solid var(--jk-border); border-radius: var(--jk-radius); background: var(--jk-bg-elevated); padding: 9px; }
.m-thumb { border-radius: var(--jk-radius-sm); background: linear-gradient(135deg, var(--jk-primary-soft), var(--jk-bg-subtle) 70%); border: 1px solid var(--jk-border); flex: none; display: grid; place-items: center; color: var(--jk-primary); }
.m-thumb svg { opacity: .85; }
.m-btn { height: 22px; border-radius: 6px; background: var(--jk-primary); color: var(--jk-on-primary); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; }
.m-btn--ghost { background: var(--jk-bg-subtle); color: var(--jk-text); border: 1px solid var(--jk-border); }
.m-price { font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }

/* chat bubbles */
.m-bubble { max-width: 82%; padding: 7px 9px; border-radius: 11px; font-size: 10px; line-height: 1.45; }
.m-bubble--user { align-self: flex-end; background: var(--jk-primary); color: var(--jk-on-primary); border-bottom-right-radius: 3px; }
.m-bubble--ai { align-self: flex-start; background: var(--jk-bg-subtle); border: 1px solid var(--jk-border); border-bottom-left-radius: 3px; }
.m-ailabel { display: inline-flex; align-items: center; gap: 4px; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--jk-primary); }
.m-ailabel svg { width: 10px; height: 10px; }

/* suggested-question chips */
.m-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.m-chip { font-size: 9px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--jk-primary-soft); color: var(--jk-primary); border: 1px solid var(--jk-primary-soft-border); white-space: nowrap; }

/* pros / cons (Revoo) */
.m-pc { display: flex; flex-direction: column; gap: 4px; }
.m-pc__line { display: flex; align-items: flex-start; gap: 5px; font-size: 9.5px; }
.m-pc__ic { width: 13px; height: 13px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: 1px; }
.m-pc__ic svg { width: 9px; height: 9px; }
.m-pc__ic--pro { background: var(--jk-success-bg); color: var(--jk-success-text); }
.m-pc__ic--con { background: var(--jk-danger-bg); color: var(--jk-danger-text); }

/* mini table (moderation queue / rollback) */
.m-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.m-table th { text-align: left; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; color: var(--jk-text-muted); padding: 4px 6px; border-bottom: 1px solid var(--jk-border); font-weight: 700; }
.m-table td { padding: 6px; border-bottom: 1px solid var(--jk-border); }
.m-table tr:last-child td { border-bottom: none; }

/* risk / score pills */
.m-pill { font-size: 8.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; }
.m-pill--hi { background: var(--jk-danger-bg); color: var(--jk-danger-text); border: 1px solid var(--jk-danger-border); }
.m-pill--md { background: var(--jk-warning-bg); color: var(--jk-warning-text); border: 1px solid var(--jk-warning-border); }
.m-pill--lo { background: var(--jk-success-bg); color: var(--jk-success-text); border: 1px solid var(--jk-success-border); }

/* mini gauge / meter */
.m-meter { height: 7px; border-radius: 999px; background: var(--jk-bg-subtle); overflow: hidden; border: 1px solid var(--jk-border); }
.m-meter__fill { display: block; height: 100%; background: var(--jk-primary); border-radius: 999px; }
.m-meter__fill--warn { background: var(--jk-warning); }

/* ring gauge (credits) */
.m-ring { width: 78px; height: 78px; flex: none; }
.m-ring__track { fill: none; stroke: var(--jk-bg-subtle); stroke-width: 9; }
.m-ring__val { fill: none; stroke: var(--jk-primary); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }

/* stars */
.m-stars { color: var(--jk-warning); letter-spacing: 1px; font-size: 11px; }

/* A/B/C intent columns (BehaviorInsights) */
.m-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; flex: 1; min-height: 0; }
.m-lane { border: 1px solid var(--jk-border); border-radius: var(--jk-radius); background: var(--jk-bg-subtle); padding: 7px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.m-lane__head { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; }
.m-lead { border-color: var(--jk-primary-soft-border); background: var(--jk-primary-soft); }
.m-mini-card { background: var(--jk-bg-elevated); border: 1px solid var(--jk-border); border-radius: 6px; padding: 5px 6px; font-size: 8.5px; }

/* page-diagnosis prescription */
.m-flag { border-left: 3px solid var(--jk-warning); background: var(--jk-warning-bg); padding: 6px 8px; border-radius: 0 6px 6px 0; font-size: 9px; color: var(--jk-warning-text); }
.m-fix { border-left: 3px solid var(--jk-primary); background: var(--jk-primary-soft); padding: 6px 8px; border-radius: 0 6px 6px 0; font-size: 9px; color: var(--jk-primary); }

/* before / after compare (AstraSwitch) */
.m-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; border: 1px solid var(--jk-border); border-radius: var(--jk-radius); overflow: hidden; min-height: 0; }
.m-compare__side { padding: 9px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.m-compare__side--before { background: var(--jk-bg-subtle); border-right: 1px dashed var(--jk-border); }
.m-compare__tag { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.m-compare__tag--before { color: var(--jk-text-muted); }
.m-compare__tag--after { color: var(--jk-primary); }

/* migration step list */
.m-step { display: flex; align-items: center; gap: 7px; font-size: 9.5px; }
.m-step__no { width: 16px; height: 16px; border-radius: 50%; background: var(--jk-primary); color: var(--jk-on-primary); font-size: 8px; font-weight: 800; display: grid; place-items: center; flex: none; }
.m-step__no--done { background: var(--jk-success); }
.m-step__no--todo { background: var(--jk-bg-subtle); color: var(--jk-text-muted); border: 1px solid var(--jk-border); }