/* QHEY component classes used by the screens (.card .btn .chip .sv .tbl .kpi .seg .bub .pill …). */
.q *{box-sizing:border-box}
.q a{color:var(--primary);text-decoration:none}.q a:hover{color:var(--primary-hover);text-decoration:underline}
.num{font-variant-numeric:tabular-nums}
.ltr{direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px}
.muted{color:var(--ink-muted)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px}
.h1{font-size:24px;line-height:32px;font-weight:700;margin:0}
.h2{font-size:16px;line-height:24px;font-weight:600;margin:0}
.lbl{font-size:12px;line-height:16px;font-weight:500;color:var(--ink-muted)}
.btn{font-family:inherit;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink-muted)}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.btn.icon{width:32px;padding:0;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;background:var(--surface-3);color:var(--ink);white-space:nowrap}
.chip.blue{background:var(--blue-soft);color:var(--primary)}
.chip.warn{background:var(--warning-soft);color:var(--warning)}
.chip.bad{background:var(--danger-soft);color:var(--danger)}
.chip.ok{background:var(--success-soft);color:var(--success)}
.chip.mid{background:var(--mid-soft);color:var(--mid-ink)}
.hbar{border-radius:8px}
.chip.out{background:transparent;border:1px dashed var(--border-strong);color:var(--ink-muted)}
.sv{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:500}
.sv .bars{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.sv .b{width:4px;border-radius:1px;background:var(--bar-off)}
.sv .b:nth-child(1){height:6px}.sv .b:nth-child(2){height:8px}.sv .b:nth-child(3){height:10px}.sv .b:nth-child(4){height:12px}.sv .b:nth-child(5){height:14px}
.sv.l1 .b:nth-child(-n+1){background:var(--sev-1)}
.sv.l2 .b:nth-child(-n+2){background:var(--sev-2)}
.sv.l3 .b:nth-child(-n+3){background:var(--sev-3)}
.sv.l4 .b:nth-child(-n+4){background:var(--sev-4)}
.sv.l5 .b:nth-child(-n+5){background:var(--sev-5)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:500;color:var(--ink-muted);text-align:right;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl.rec th,.tbl.rec td{padding-inline:8px}
.nav{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:8px;color:var(--ink-muted);font-size:14px;font-weight:500}
.q a.nav{color:var(--ink-muted);text-decoration:none}.q a.nav:hover{color:var(--ink);text-decoration:none;background:var(--surface-2)}.q a.nav.on{background:var(--blue-soft);color:var(--primary)}
.nav .cnt{margin-inline-start:auto;font-size:12px}
.kpi{padding:16px;display:flex;flex-direction:column;gap:6px}
.kpi .v{font-size:28px;line-height:34px;font-weight:700}
.delta{font-size:12px;font-weight:500}
.up{color:var(--success)}.down{color:var(--danger)}
.skel{background:var(--surface-3);border-radius:6px}
.seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden}
.seg span{padding:0 12px;height:30px;display:inline-flex;align-items:center;font-size:13px;color:var(--ink-muted);border-inline-start:1px solid var(--border)}
.seg span:first-child{border-inline-start:none}
.seg span.on{background:var(--blue-soft);color:var(--primary);font-weight:500}
.kbd{font-family:"JetBrains Mono",monospace;font-size:11px;border:1px solid var(--border-strong);border-radius:4px;padding:0 4px;color:var(--ink-muted)}
.hatch{background:repeating-linear-gradient(135deg,var(--surface-3) 0 6px,transparent 6px 12px);border:1px dashed var(--border-strong)}
.bub{max-width:560px;padding:10px 14px;border-radius:14px;font-size:14px;line-height:22px}
.bub.cust{background:var(--surface);border:1px solid var(--border);border-start-start-radius:4px}
.bub.bot{background:var(--blue-soft);border:1px solid var(--blue-line);border-start-end-radius:4px}
.bub.agent{background:var(--surface-3);border:1px solid var(--border-strong);border-start-end-radius:4px}
.bub.note{background:var(--note);border:1px dashed var(--note-line);border-radius:8px;font-size:13px}
.meta{font-size:11px;color:var(--ink-faint);display:flex;gap:6px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;font-size:12px;font-weight:500;border:1px solid var(--border)}
.pill.ok{background:var(--success-soft);color:var(--success);border-color:transparent}
.pill.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.pill.skip{background:transparent;color:var(--ink-muted);border-style:dashed}
.pill.run{background:var(--blue-soft);color:var(--primary);border-color:transparent}
.hsel{border-color:var(--primary) !important;box-shadow:0 0 0 1px var(--primary)}
.htile{font-family:inherit;text-align:start;cursor:pointer;color:var(--ink)}
.link-num{color:var(--primary);border-bottom:1px dashed var(--primary);font-weight:600}