/* Qualify monitor, Ops Console look (2026-10-13 rebuild). Values are the console's
   colors_and_type.css + ops-tokens.css. Declared on the page and the sheet only, never on :root,
   so nothing leaks into other Hub pages (#101 fixed one such collision). Dark only, as the brand is. */
.qm-page, #qm-drawer, #qm-scrim {
  --qm-pane: #121212; --qm-pane-2: #171717; --qm-pane-3: #1d1d1d;
  --qm-line: #232323; --qm-line-2: #2f2f2f;
  --qm-ink: #ededed; --qm-dim: #8a8a8a; --qm-faint: #5e5e5e; --qm-white: #f5f5f5;
  --qm-gold-lt: #d4ae52; --qm-gold-dim: #8a6e20; --qm-gold-glow: rgba(184,150,46,.15);
  --qm-ok: #5fb878; --qm-ok-ink: #7cc98f; --qm-ok-ground: #0c1410; --qm-ok-edge: #255036;
  --qm-drift: #d9a441; --qm-drift-ink: #e0b463; --qm-drift-ground: #161009; --qm-drift-edge: #5c451a;
  --qm-down: #d4493e; --qm-down-ink: #e8776d; --qm-down-ground: #170d0c; --qm-down-edge: #5e2420;
  --qm-grey: #6d6d6d;
  --qm-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --qm-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --qm-r-sm: 6px; --qm-r: 9px;
}
.qm-page { max-width: 1100px; color: var(--qm-ink); font-family: var(--qm-sans); display: grid; gap: 14px; }
.qm-page[hidden] { display: none; }   /* the grid above beats the UA [hidden] rule; the Hub router hides pages with [hidden] */
.qm-page h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--qm-white); }
.qm-num, .qm-big, .qm-v, .qm-when, .qm-t, .qm-cn, .qm-page td { font-variant-numeric: tabular-nums; }

/* bar + health */
div.qm-bar { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--qm-line); }
div.qm-bar b { font-weight: 800; font-size: 17px; color: var(--qm-white); }
div.qm-bar span { font-family: var(--qm-mono); font-size: 12px; color: var(--qm-dim); }
.qm-health { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--qm-dim); }
.qm-lamp { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--qm-ok); box-shadow: 0 0 6px rgba(95,184,120,.55); }
.qm-health.qm-h-amber, .qm-health.qm-h-red { padding: 10px 12px; border-radius: var(--qm-r); border: 1px solid; font-weight: 600; }
.qm-health.qm-h-amber { background: var(--qm-drift-ground); border-color: var(--qm-drift-edge); color: var(--qm-drift-ink); }
.qm-health.qm-h-amber .qm-lamp { background: var(--qm-drift); box-shadow: 0 0 6px rgba(217,164,65,.55); }
.qm-health.qm-h-red { background: var(--qm-down-ground); border-color: var(--qm-down-edge); color: var(--qm-down-ink); }
.qm-health.qm-h-red .qm-lamp { background: var(--qm-down); box-shadow: 0 0 6px rgba(212,73,62,.55); }
.qm-health ul { flex-basis: 100%; margin: 4px 0 0; padding-left: 18px; font-weight: 400; color: var(--qm-dim); line-height: 1.6; }

/* Today */
.qm-today { display: grid; gap: 16px; }
.qm-lbl { font-family: var(--qm-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--qm-faint); }
.qm-hero { display: grid; gap: 6px; }
.qm-big { font-family: var(--qm-mono); font-size: 64px; line-height: .95; font-weight: 600; color: var(--qm-white); letter-spacing: -.02em; }
.qm-verdict { font-size: 15px; font-weight: 700; color: var(--qm-dim); }
.qm-v-ahead { color: var(--qm-ok-ink); }
.qm-v-behind { color: var(--qm-drift-ink); }
.qm-pace { position: relative; height: 10px; margin: 20px 0 16px; background: var(--qm-pane-3); border-radius: 5px; }
.qm-pace-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, var(--qm-gold-dim), var(--qm-gold-lt)); }
.qm-pace-tick { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--qm-dim); }
.qm-pace-tick i { position: absolute; top: -16px; transform: translateX(-50%); white-space: nowrap; font-style: normal; font-family: var(--qm-mono); font-size: 9.5px; color: var(--qm-dim); }
.qm-pace-full { background: var(--qm-faint); }
.qm-pace-full i { top: auto; bottom: -16px; }
.qm-split { font-size: 12px; color: var(--qm-dim); }
.qm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--qm-line); border: 1px solid var(--qm-line); border-radius: var(--qm-r); overflow: hidden; }
.qm-stat { display: grid; gap: 3px; padding: 10px; background: var(--qm-pane); }
.qm-v { font-family: var(--qm-mono); font-size: 22px; font-weight: 600; color: var(--qm-white); }
.qm-typ { font-size: 11px; color: var(--qm-dim); }
.qm-booked { display: grid; gap: 6px; }
.qm-blist { display: grid; border-top: 1px solid var(--qm-line); }
.qm-brow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; background: none; border: 0; border-bottom: 1px solid var(--qm-line); color: var(--qm-ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.qm-brow:hover .qm-who { color: var(--qm-gold-lt); }
.qm-who { min-width: 0; }
.qm-who small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--qm-faint); }
.qm-when { flex: none; font-family: var(--qm-mono); font-size: 12px; color: var(--qm-dim); }
.qm-tag { margin-left: 6px; padding: 1px 5px; border-radius: 4px; font-family: var(--qm-mono); font-size: 10px; color: var(--qm-gold-lt); background: var(--qm-gold-glow); }
.qm-none { margin: 0; font-size: 12.5px; color: var(--qm-dim); }
.qm-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qm-movers .qm-lbl { display: block; margin-bottom: 6px; }
.qm-lbl.qm-up { color: var(--qm-ok-ink); }
.qm-lbl.qm-quiet { color: var(--qm-drift-ink); }
.qm-mlist { margin: 0; padding: 0; list-style: none; font-size: 12.5px; line-height: 1.7; }
.qm-mlist span { font-family: var(--qm-mono); font-size: 11px; color: var(--qm-faint); }

/* Clinics */
.qm-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--qm-gold-dim) 40%, var(--qm-gold-dim) 60%, transparent); }
.qm-sec-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.qm-win { display: inline-flex; padding: 2px; background: var(--qm-pane); border: 1px solid var(--qm-line-2); border-radius: var(--qm-r-sm); }
.qm-win button { padding: 4px 10px; border: 0; border-radius: 4px; background: none; color: var(--qm-dim); font-family: var(--qm-mono); font-size: 11px; cursor: pointer; }
.qm-win button[aria-pressed="true"] { background: var(--qm-pane-3); color: var(--qm-gold-lt); }
.qm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qm-chip { padding: 5px 10px; border: 1px solid var(--qm-line-2); border-radius: 999px; background: var(--qm-pane); color: var(--qm-dim); font: inherit; font-size: 12px; cursor: pointer; }
.qm-chip.qm-on { border-color: var(--qm-gold-dim); background: var(--qm-gold-glow); color: var(--qm-gold-lt); }
.qm-cn { margin-left: 5px; font-family: var(--qm-mono); font-size: 11px; color: var(--qm-faint); }
.qm-chip.qm-on .qm-cn { color: var(--qm-gold-lt); }
.qm-cap { margin: 0; padding: 8px 12px; border: 1px solid var(--qm-drift-edge); border-radius: var(--qm-r); background: var(--qm-drift-ground); color: var(--qm-drift-ink); font-size: 12.5px; }
.qm-empty { padding: 16px 0; color: var(--qm-dim); font-size: 13px; }

.qm-tablewrap { overflow-x: auto; }
.qm-tablewrap table { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.qm-tablewrap th { padding: 0 10px 4px; text-align: right; font-family: var(--qm-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--qm-faint); cursor: pointer; white-space: nowrap; }
.qm-tablewrap th.qm-name { text-align: left; }
.qm-tablewrap th:not([data-s]) { cursor: default; }
.qm-tablewrap th[data-active] { color: var(--qm-gold-lt); }
.qm-ar { font-size: 8px; }
tr.qm-clinic td { padding: 9px 10px; background: var(--qm-pane); border-top: 1px solid var(--qm-line); border-bottom: 1px solid var(--qm-line); text-align: right; font-family: var(--qm-mono); font-size: 13px; color: var(--qm-dim); cursor: pointer; }
tr.qm-clinic td:first-child { border-left: 1px solid var(--qm-line); border-radius: var(--qm-r) 0 0 var(--qm-r); width: 14px; }
tr.qm-clinic td:last-child { border-right: 1px solid var(--qm-line); border-radius: 0 var(--qm-r) var(--qm-r) 0; }
tr.qm-clinic td.qm-name { text-align: left; font-family: var(--qm-sans); font-size: 13.5px; color: var(--qm-ink); }
tr.qm-clinic td.qm-bk { color: var(--qm-white); font-weight: 600; }
tr.qm-clinic td.qm-zero { color: var(--qm-faint); }
tr.qm-clinic:hover td, tr.qm-clinic:focus-visible td { background: var(--qm-pane-2); }
.qm-page tr.qm-clinic:focus-visible { outline-offset: -2px; }   /* .qm-tablewrap scrolls, so an outside ring would be clipped */
tr.qm-clinic.qm-open td { border-color: var(--qm-gold-dim); }
tr.qm-clinic.qm-unknown td { background: var(--qm-down-ground); border-color: var(--qm-down-edge); }
tr.qm-clinic.qm-unknown td.qm-name { color: var(--qm-down-ink); }
.qm-d { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.qm-d.qm-green { background: var(--qm-ok); }
.qm-d.qm-amber { background: var(--qm-drift); }
.qm-d.qm-red { background: var(--qm-down); }
.qm-d.qm-quiet { border: 1.5px solid var(--qm-grey); box-sizing: border-box; }
.qm-hotlbl { display: none; margin-left: 6px; font-family: var(--qm-mono); font-size: 10px; color: var(--qm-drift-ink); }
.qm-barcell { width: 120px; }
.qm-track { display: block; height: 4px; border-radius: 2px; background: var(--qm-pane-3); }
.qm-fill { display: block; height: 100%; border-radius: 2px; background: var(--qm-gold-dim); }
.qm-fill.qm-good { background: var(--qm-gold-lt); }
tr.qm-leads td { padding: 0; }
.qm-leadlist { display: grid; padding: 2px 12px 6px; background: var(--qm-pane-2); border: 1px solid var(--qm-gold-dim); border-top: 0; border-radius: 0 0 var(--qm-r) var(--qm-r); margin-top: -4px; }
.qm-leadlist .qm-lead { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--qm-line); font-size: 12.5px; cursor: pointer; }
.qm-leadlist .qm-lead:last-child { border-bottom: 0; }
.qm-leadlist .qm-lead:hover .qm-w, .qm-leadlist .qm-lead:focus-visible .qm-w { color: var(--qm-gold-lt); }
.qm-leadlist .qm-lead.qm-lead-empty { cursor: default; grid-template-columns: 1fr; }
.qm-t { font-family: var(--qm-mono); font-size: 11px; color: var(--qm-faint); }
.qm-w { min-width: 0; color: var(--qm-ink); }
.qm-w small { display: block; margin-top: 2px; font-size: 11px; color: var(--qm-faint); }
.qm-pill { padding: 2px 6px; border: 1px solid var(--qm-line-2); border-radius: 4px; font-family: var(--qm-mono); font-size: 10px; color: var(--qm-dim); white-space: nowrap; }
.qm-pill.qm-p-booked { color: var(--qm-ok-ink); border-color: var(--qm-ok-edge); background: var(--qm-ok-ground); }
.qm-pill.qm-p-hot { color: var(--qm-drift-ink); border-color: var(--qm-drift-edge); background: var(--qm-drift-ground); }
.qm-ghl { font-family: var(--qm-mono); font-size: 11px; color: var(--qm-gold-lt); text-decoration: none; white-space: nowrap; }
.qm-rollup, .qm-silent { padding: 8px 0 2px; font-size: 12px; color: var(--qm-faint); }
.qm-demos-h { width: 100%; padding: 11px 12px; border: 1px dashed var(--qm-line-2); border-radius: var(--qm-r); background: none; color: var(--qm-faint); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.qm-demos .qm-leadlist { border-color: var(--qm-line-2); border-top: 0; margin-top: -2px; }

/* Phone: the table becomes rows of name + Leads, Chat, Book; Hot moves beside the name and
   engagement becomes a thin line along the bottom of the row. */
@media (max-width: 699px) {
  .qm-tablewrap table, .qm-tablewrap thead, .qm-tablewrap tbody { display: block; }
  .qm-tablewrap thead tr { display: grid; grid-template-columns: 14px minmax(0, 1fr) 52px 52px 52px; gap: 8px; padding: 0 11px; }   /* 11px = the row's 10px padding + 1px border */
  .qm-tablewrap th { padding: 0 0 4px; }
  .qm-tablewrap th .qm-ar { display: none; }
  .qm-tablewrap th:nth-child(6), .qm-tablewrap th.qm-bar { display: none; }
  tr.qm-clinic { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr) 52px 52px 52px; gap: 8px; align-items: center; margin-top: 4px; padding: 10px; background: var(--qm-pane); border: 1px solid var(--qm-line); border-radius: var(--qm-r); }
  tr.qm-clinic td, tr.qm-clinic td:first-child, tr.qm-clinic td:last-child { padding: 0; border: 0; border-radius: 0; background: none; }
  tr.qm-clinic:hover td, tr.qm-clinic:focus-visible td, tr.qm-clinic.qm-unknown td { background: none; }
  tr.qm-clinic:hover, tr.qm-clinic:focus-visible { background: var(--qm-pane-2); }
  tr.qm-clinic td.qm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  tr.qm-clinic td.qm-hotcol { display: none; }
  tr.qm-clinic .qm-hotlbl { display: inline; }
  tr.qm-clinic td.qm-barcell { position: absolute; left: 10px; right: 10px; bottom: 3px; width: auto; }
  .qm-track { height: 2px; }
  tr.qm-clinic.qm-open { border-color: var(--qm-gold-dim); border-radius: var(--qm-r) var(--qm-r) 0 0; }
  tr.qm-clinic.qm-unknown { background: var(--qm-down-ground); border-color: var(--qm-down-edge); }
  tr.qm-leads { display: block; }
  tr.qm-leads td { display: block; }
  .qm-leadlist { margin-top: -1px; }
  .qm-leadlist .qm-lead { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .qm-leadlist .qm-lead .qm-ghl { display: none; }   /* the sheet has the GHL button */
  .qm-big { font-size: 56px; }
}

/* The conversation: a side panel on a laptop, a sheet from the bottom on a phone. It lives
   outside the page section on purpose (see index.html). */
#qm-scrim { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
#qm-scrim.on { opacity: 1; pointer-events: auto; }
#qm-drawer { position: fixed; z-index: 901; top: 0; right: 0; bottom: 0; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--qm-pane); border-left: 1px solid var(--qm-line-2); box-shadow: 0 10px 30px rgba(0,0,0,.55); color: var(--qm-ink); font-family: var(--qm-sans); transform: translateX(100%); visibility: hidden; transition: transform .25s cubic-bezier(.22,1,.36,1), visibility 0s .25s; }
#qm-drawer.on { transform: none; visibility: visible; transition: transform .25s cubic-bezier(.22,1,.36,1); }
.qm-grab { display: none; }
.qm-dr-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 16px 16px 8px; }
.qm-dr-h .qm-who { font-size: 17px; font-weight: 700; color: var(--qm-white); }
.qm-dr-h .qm-who .qm-pill { vertical-align: 3px; }
.qm-sub { margin-top: 3px; font-size: 12px; color: var(--qm-dim); }
.qm-dr-x { padding: 4px 6px; border: 0; background: none; color: var(--qm-faint); font-size: 15px; cursor: pointer; }
.qm-why { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 8px; }
.qm-sig { padding: 3px 8px; border-radius: 999px; background: var(--qm-pane-3); color: var(--qm-dim); font-size: 11.5px; }
.qm-dr-b { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 8px; padding: 8px 16px 12px; }
.qm-msg { max-width: 82%; padding: 8px 11px; border-radius: 14px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.qm-msg.qm-bot { justify-self: start; background: var(--qm-pane-3); color: var(--qm-ink); border-bottom-left-radius: 4px; }
.qm-msg.qm-lead { justify-self: end; background: linear-gradient(135deg, #c19a2c, #d4ae52 50%, #b8962e); color: #0a0a0a; border-bottom-right-radius: 4px; }
.qm-loading, .qm-loadfail { padding: 12px 0; font-size: 13px; color: var(--qm-dim); }
.qm-retry { margin-left: 6px; padding: 3px 10px; border: 1px solid var(--qm-line-2); border-radius: var(--qm-r-sm); background: var(--qm-pane-2); color: var(--qm-ink); font: inherit; font-size: 12px; cursor: pointer; }
.qm-ghl-btn { display: block; margin: 0 16px 16px; padding: 11px; border-radius: var(--qm-r); background: linear-gradient(135deg, #c19a2c, #d4ae52 50%, #b8962e); color: #0a0a0a; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; }
.qm-ghl-btn[hidden] { display: none; }   /* the author display above beats the UA [hidden] rule; JS hides it when there is no GHL link */
@media (max-width: 699px) {
  #qm-drawer { top: auto; left: 0; width: 100%; max-height: 88vh; border-left: 0; border-top: 1px solid var(--qm-line-2); border-radius: 18px 18px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
  #qm-drawer.on { transform: none; }
  .qm-grab { display: block; width: 38px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--qm-line-2); }
}
@media (prefers-reduced-motion: reduce) {
  #qm-drawer, #qm-scrim { transition: none; }
}
.qm-page button:focus-visible, .qm-page [tabindex]:focus-visible, #qm-drawer button:focus-visible, #qm-drawer a:focus-visible {
  outline: 2px solid var(--qm-gold-lt); outline-offset: 2px;
}