/* ============================================================
   v6 OS module: mission control (2021–2023)
   sidebar app · mission page · personas (2023, chat-style) ·
   contact · links · ⌘K palette
   ============================================================ */
#os-grid {
  position: absolute; inset: 0; display: none;
  background: var(--q-bg, #0a0c10);
  color: var(--q-ink, #d4dae2);
  font-family: var(--sans);
}
#os-grid.on { display: flex; }

/* ---------- sidebar ---------- */
.q-side {
  width: 200px; flex: none; display: flex; flex-direction: column;
  background: var(--q-panel, #10131a);
  border-right: 1px solid var(--q-line, #1d222c);
  padding: 14px 10px calc(12px + env(safe-area-inset-bottom));
  gap: 12px;
}
.q-logo { font: 700 15px var(--mono); color: var(--q-acc); letter-spacing: .08em; padding: 2px 10px 8px; border-bottom: 1px solid var(--q-line); }
.q-nav { display: flex; flex-direction: column; gap: 3px; }
.q-nav-i {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 10px; border-radius: 9px; color: var(--q-dim); font-size: 13px;
  min-height: 42px; position: relative;
}
.q-nav-i i { font-style: normal; font-size: 14px; width: 18px; text-align: center; }
.q-nav-i:hover { background: rgba(255, 255, 255, .05); color: var(--q-ink); }
.q-nav-i.on { background: color-mix(in srgb, var(--q-acc) 13%, transparent); color: var(--q-ink); }
.q-nav-i.on i { color: var(--q-acc); }
.q-nav-i em {
  font-style: normal; margin-left: auto; font-size: 8.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: #08211e;
  background: var(--q-acc); border-radius: 99px; padding: 2.5px 7px;
  animation: q-new 1.8s ease-in-out infinite;
}
@keyframes q-new { 50% { box-shadow: 0 0 12px color-mix(in srgb, var(--q-acc) 60%, transparent); } }
.q-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.q-kbtn {
  font-family: var(--mono); font-size: 11px; color: var(--q-dim);
  border: 1px solid var(--q-line); border-radius: 7px; padding: 7px 10px;
  text-align: center; min-height: 34px;
}
.q-kbtn:hover { color: var(--q-ink); border-color: var(--q-acc); }
.q-yr { font-family: var(--mono); font-size: 10px; color: var(--q-dim); text-align: center; }

/* ---------- main ---------- */
.q-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-top {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 13px 18px; border-bottom: 1px solid var(--q-line);
}
.q-top b { font: 700 12.5px var(--mono); letter-spacing: .05em; }
.q-ok { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: #3fbf7a; white-space: nowrap; }
.q-pages { flex: 1; min-height: 0; position: relative; }
.q-page { position: absolute; inset: 0; display: none; overflow-y: auto; padding: 16px 18px calc(16px + env(safe-area-inset-bottom)); }
.q-page.on { display: block; animation: q-in .3s ease; }
@keyframes q-in { from { opacity: 0; transform: translateY(4px); } }
.q-page[data-page="personas"] { padding: 0; overflow: hidden; }

/* mission */
.q-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.q-metric {
  background: var(--q-panel); border: 1px solid var(--q-line); border-radius: 12px;
  padding: 14px 14px 12px;
}
.q-metric b { display: block; font: 700 24px var(--mono); color: var(--q-acc); }
.q-metric small { font-size: 10.5px; color: var(--q-dim); text-transform: uppercase; letter-spacing: .07em; }
.q-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.q-panel { background: var(--q-panel); border: 1px solid var(--q-line); border-radius: 12px; padding: 13px 14px; min-width: 0; }
.q-cap { font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--q-dim); margin-bottom: 10px; }
.q-log { max-height: 300px; overflow-y: auto; display: grid; gap: 6px; }
.q-lyr { font: 700 10.5px var(--mono); color: var(--q-dim); margin-top: 6px; letter-spacing: .1em; }
.q-ll { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.5; }
.q-tag {
  flex: none; font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: var(--q-dim);
}
.q-tag.t-ship { color: var(--q-acc); background: color-mix(in srgb, var(--q-acc) 12%, transparent); }
.q-tag.t-team { color: #e0b45a; background: rgba(224, 180, 90, .12); }
.q-eps { display: grid; gap: 2px; }
.q-ep { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 7px 2px; border-bottom: 1px solid var(--q-line); }
.q-ep:last-child { border: none; }
.q-ep span { font-family: var(--mono); font-size: 11.5px; }
.q-ep small { color: #3fbf7a; font-size: 10.5px; white-space: nowrap; }
@media (max-width: 640px) { .q-cols { grid-template-columns: 1fr; } .q-metrics { grid-template-columns: repeat(3, 1fr); gap: 7px; } .q-metric b { font-size: 18px; } }

/* personas (chat-style) */
.q-pers { display: flex; height: 100%; }
.q-plist {
  width: 220px; flex: none; overflow-y: auto;
  border-right: 1px solid var(--q-line); padding: 10px 8px;
  display: flex; flex-direction: column; gap: 3px;
}
.q-pi {
  display: flex; gap: 10px; align-items: center; text-align: left;
  padding: 9px 9px; border-radius: 10px; min-height: 52px;
}
.q-pi:hover { background: rgba(255, 255, 255, .04); }
.q-pi.on { background: color-mix(in srgb, var(--q-acc) 11%, transparent); }
.q-pav {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: rgba(255, 255, 255, .09); color: var(--q-ink);
}
.q-pav.new { background: var(--q-acc); color: #08211e; }
.q-pt { min-width: 0; }
.q-pt b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-pt b em { font-style: normal; font-size: 8.5px; color: var(--q-acc); border: 1px solid var(--q-acc); border-radius: 99px; padding: 1px 5px; margin-left: 5px; vertical-align: 2px; }
.q-pt small { display: block; font-size: 10px; color: var(--q-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-chat { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.q-chat-h { flex: none; padding: 12px 16px; border-bottom: 1px solid var(--q-line); }
.q-chat-h b { font-size: 13.5px; display: block; }
.q-chat-h small { font-size: 10.5px; color: var(--q-dim); }
.q-msgs { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.q-hint { font-size: 10.5px; color: var(--q-dim); text-align: center; padding: 2px 10px 8px; }
.q-m { display: flex; gap: 10px; max-width: 92%; }
.q-m.you { align-self: flex-end; flex-direction: row-reverse; }
.q-mav {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
  background: rgba(255, 255, 255, .09); color: var(--q-dim);
}
.q-m.you .q-mav { background: color-mix(in srgb, var(--q-acc) 20%, transparent); color: var(--q-acc); }
.q-mt {
  background: var(--q-panel); border: 1px solid var(--q-line);
  border-radius: 13px; padding: 9px 12px; font-size: 13px; line-height: 1.55; min-height: 1em;
}
.q-m.you .q-mt { background: color-mix(in srgb, var(--q-acc) 13%, transparent); border-color: color-mix(in srgb, var(--q-acc) 25%, transparent); }
.q-composer {
  flex: none; display: flex; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--q-line);
}
.q-composer input {
  flex: 1; min-width: 0; background: var(--q-panel); border: 1px solid var(--q-line);
  border-radius: 99px; color: var(--q-ink); padding: 10px 16px; font: inherit; font-size: 13px; outline: none;
}
.q-composer input:focus { border-color: var(--q-acc); }
.q-composer button {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  background: var(--q-acc); color: #08211e; font-size: 16px; font-weight: 700;
}
@media (max-width: 620px) {
  .q-plist { width: 74px; }
  .q-pt { display: none; }
  .q-pi { justify-content: center; }
}

/* contact */
.q-contact { max-width: 460px; }
.q-contact label { display: grid; gap: 5px; font-size: 11px; color: var(--q-dim); margin-bottom: 11px; }
.q-contact input, .q-contact textarea {
  background: rgba(255, 255, 255, .04); border: 1px solid var(--q-line); border-radius: 9px;
  color: var(--q-ink); padding: 10px 11px; font: inherit; font-size: 13px; outline: none; width: 100%;
}
.q-contact input:focus, .q-contact textarea:focus { border-color: var(--q-acc); }
.q-contact textarea { min-height: 76px; resize: vertical; }
.q-contact .f-err { color: #e06a5a; font-size: 10.5px; font-weight: 600; }
.q-prio { display: flex; gap: 6px; margin-bottom: 13px; }
.q-prio button {
  flex: 1; font-size: 11.5px; color: var(--q-dim); border: 1px solid var(--q-line);
  border-radius: 99px; padding: 7px 6px; min-height: 36px;
}
.q-prio button.on { color: var(--q-acc); border-color: var(--q-acc); background: color-mix(in srgb, var(--q-acc) 10%, transparent); }
.q-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.q-primary {
  background: var(--q-acc); color: #08211e; font-weight: 700; font-size: 13px;
  border-radius: 10px; padding: 10px 20px; min-height: 42px;
}
.q-done { font-size: 12px; color: #3fbf7a; font-weight: 600; }

/* links */
.q-link {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  color: var(--q-ink); text-decoration: none; font-size: 13.5px;
  padding: 13px 4px; border-bottom: 1px solid var(--q-line); min-height: 46px;
}
.q-link:last-child { border: none; }
.q-link i { font-style: normal; color: var(--q-dim); }
.q-link:hover span { color: var(--q-acc); }

/* ⌘K palette */
.q-k { position: absolute; inset: 0; z-index: 50; background: rgba(4, 6, 9, .6); backdrop-filter: blur(3px); display: grid; place-items: start center; padding-top: 12vh; }
.q-k-box {
  width: min(430px, calc(100% - 32px));
  background: var(--q-panel); border: 1px solid var(--q-line); border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden;
}
#q-k-in {
  width: 100%; background: none; border: none; outline: none; color: var(--q-ink);
  font: inherit; font-size: 14.5px; padding: 15px 16px;
  border-bottom: 1px solid var(--q-line);
}
.q-k-list { max-height: 250px; overflow-y: auto; padding: 6px; }
.q-k-i {
  display: block; width: 100%; text-align: left; font-size: 13px; color: var(--q-ink);
  padding: 10px 12px; border-radius: 8px; min-height: 40px;
}
.q-k-i.sel { background: color-mix(in srgb, var(--q-acc) 14%, transparent); color: var(--q-acc); }
.q-k-empty { padding: 14px; font-size: 12px; color: var(--q-dim); }
.q-k-hint { font-family: var(--mono); font-size: 9.5px; color: var(--q-dim); padding: 8px 14px 10px; border-top: 1px solid var(--q-line); }

/* small screens: sidebar becomes a top rail */
@media (max-width: 560px) {
  #os-grid.on { flex-direction: column; }
  .q-side { width: 100%; flex-direction: row; align-items: center; padding: 8px 10px; gap: 8px; border-right: none; border-bottom: 1px solid var(--q-line); }
  .q-logo { border: none; padding: 0 6px; font-size: 13px; }
  .q-nav { flex-direction: row; flex: 1; overflow-x: auto; }
  .q-nav-i { padding: 7px 9px; min-height: 38px; }
  .q-nav-i span { display: none; }
  .q-nav-i em { display: none; }
  .q-side-foot { margin: 0; flex-direction: row; }
  .q-yr { display: none; }
  .q-top { padding: 10px 14px; }
  .q-ok { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .q-page.on, .q-nav-i em { animation: none; }
}


/* ============================================================
   v7 additions — clickable endpoints, metric notes, AGENT ARENA
   ============================================================ */
.q-eps { display: grid; gap: 6px; }
.q-ep {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  text-align: left; color: var(--q-ink);
  background: color-mix(in srgb, var(--q-panel) 70%, var(--q-bg));
  border: 1px solid var(--q-line); border-radius: 8px; padding: 8px 11px;
}
.q-ep:hover { border-color: color-mix(in srgb, var(--q-acc) 45%, var(--q-line)); }
.q-ep span { font: 12px var(--mono); }
.q-ep small { font: 10.5px var(--mono); color: #7fb069; text-align: right; }
.q-ep em {
  grid-column: 1 / -1; font-style: normal; font: 10.5px/1.55 var(--mono); color: var(--q-dim);
  max-height: 0; overflow: hidden; transition: max-height .25s ease, margin .25s ease;
}
.q-ep.open em { max-height: 60px; margin-top: 4px; }
.q-metric { cursor: pointer; text-align: left; color: inherit; }
.q-metric:hover b { color: var(--q-acc); }

/* ---------- AGENT ARENA ---------- */
.q-arena { padding: 14px; }
.ar-wrap { display: grid; gap: 10px; justify-items: center; }
.ar-title { font: 800 22px var(--mono); letter-spacing: .14em; color: var(--q-acc); text-align: center; }
.ar-sub { font: 12px var(--mono); color: var(--q-dim); text-align: center; }
.ar-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; width: 100%; max-width: 560px; }
.ar-card {
  display: grid; gap: 5px; justify-items: center; text-align: center;
  background: color-mix(in srgb, var(--fc) 8%, var(--q-panel));
  border: 1px solid color-mix(in srgb, var(--fc) 40%, var(--q-line));
  border-radius: 12px; padding: 16px 10px; color: var(--q-ink);
}
.ar-card:hover { transform: translateY(-3px); border-color: var(--fc); box-shadow: 0 8px 24px color-mix(in srgb, var(--fc) 22%, transparent); }
.ar-card .ar-glyph { font-size: 30px; color: var(--fc); }
.ar-card b { font: 800 12.5px var(--mono); letter-spacing: .06em; }
.ar-card small { font: 10px var(--mono); color: var(--q-dim); }
.ar-hint { font: 11px var(--mono); color: var(--q-dim); text-align: center; }
.ar-bars { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 720px; }
.ar-side { flex: 1; display: grid; gap: 4px; }
.ar-side b { font: 800 11px var(--mono); letter-spacing: .06em; }
.ar-side.r { text-align: right; }
.ar-side.r .ar-hp i { margin-left: auto; }
.ar-hp { height: 10px; border-radius: 6px; background: color-mix(in srgb, var(--q-line) 60%, transparent); overflow: hidden; display: flex; }
.ar-hp i { display: block; height: 100%; width: 100%; border-radius: 6px; transition: width .18s ease; }
.ar-timer { font: 800 18px var(--mono); color: var(--q-acc); min-width: 40px; text-align: center; }
.ar-stage { position: relative; width: 100%; max-width: 720px; }
.ar-stage canvas { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid var(--q-line); }
.ar-announce {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  font: 800 34px var(--mono); letter-spacing: .18em; color: #fff; pointer-events: none;
  text-shadow: 0 4px 24px rgba(0,0,0,.7); gap: 12px;
}
.ar-announce.go { animation: ar-pop .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes ar-pop { from { transform: scale(.5); opacity: 0; } }
.ar-announce.hold { pointer-events: auto; }
.ar-koline { font-size: 14px; letter-spacing: .04em; }
.ar-endbtns { display: flex; gap: 10px; justify-content: center; }
.ar-endbtns button {
  pointer-events: auto; font: 700 12px var(--mono); color: var(--q-bg);
  background: var(--q-acc); border-radius: 8px; padding: 10px 16px; min-height: 40px;
}
.ar-endbtns button:last-child { background: transparent; color: var(--q-ink); border: 1px solid var(--q-line); }
.ar-pads { display: flex; gap: 14px; justify-content: space-between; width: 100%; max-width: 720px; }
.ar-padgrp { display: flex; gap: 8px; }
.ar-pads button {
  font: 800 12px var(--mono); color: var(--q-ink);
  border: 1px solid var(--q-line); border-radius: 10px; padding: 12px 16px; min-height: 46px; min-width: 52px;
  background: color-mix(in srgb, var(--q-panel) 80%, var(--q-bg));
}
.ar-pads button:active { background: var(--q-acc); color: var(--q-bg); border-color: var(--q-acc); }
@media (pointer: fine) { .ar-pads { display: none; } }
/* desktop key legend — overlaid on the stage, where the pads are not */
.ar-keys {
  display: none; position: absolute; left: 0; right: 0; bottom: 7px;
  font: 11px var(--mono); color: rgba(255, 255, 255, .55); text-align: center;
  pointer-events: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.ar-keys kbd {
  font: 700 10px var(--mono); color: var(--q-ink);
  background: rgba(10, 13, 18, .72);
  border: 1px solid rgba(255, 255, 255, .22); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 5px; margin: 0 1px;
}
@media (pointer: fine) { .ar-keys { display: block; } }

/* ============================================================
   v7.2 — endpoint drill-in drawer, metric breakdowns, ep clamping
   ============================================================ */
.q-ep { grid-template-columns: max-content minmax(0, 1fr); }
.q-ep em { display: none; }
.q-ep span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.q-ep small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; min-width: 0; }
.q-ep::after { content: "\203A"; grid-row: 1; grid-column: 3; color: var(--q-dim); font-size: 13px; margin-left: 2px; }
.q-metric small { display: block; overflow: hidden; text-overflow: ellipsis; }

.q-drawer {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(4, 6, 10, .45); backdrop-filter: blur(1px);
}
.q-drawer-card {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(400px, 92%);
  background: var(--q-panel); border-left: 1px solid var(--q-line);
  box-shadow: -18px 0 40px rgba(0, 0, 0, .45);
  padding: 16px 16px 18px; overflow-y: auto;
  transform: translateX(24px); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.q-drawer.on .q-drawer-card { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .q-drawer-card { transition: none; transform: none; opacity: 1; } }
.q-dx {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--q-line); color: var(--q-dim); font-size: 15px;
}
.q-dx:hover { color: var(--q-ink); border-color: var(--q-acc); }
.q-d-head { padding-right: 34px; margin-bottom: 12px; }
.q-d-head b { display: block; font: 700 15px var(--mono); color: var(--q-ink); margin-bottom: 4px; overflow-wrap: anywhere; }
.q-d-ok { font: 10.5px var(--mono); color: #7fb069; }
.q-d-up { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.q-d-up span { font-size: 10.5px; color: var(--q-dim); text-transform: uppercase; letter-spacing: .07em; }
.q-d-up b { font: 700 15px var(--mono); color: var(--q-acc); }
.q-upgrid { display: grid; grid-template-columns: repeat(30, 1fr); gap: 2px; margin-bottom: 16px; }
.q-upgrid i { display: block; aspect-ratio: 1 / 2.4; border-radius: 1.5px; background: #2f7f57; opacity: .85; }
.q-upgrid i.meh { background: #b08a3a; }
.q-upgrid i.bad { background: #b04a3a; }
.q-d-cap { font-size: 10.5px; color: var(--q-dim); text-transform: uppercase; letter-spacing: .09em; margin-bottom: 8px; }
.q-incs { display: grid; gap: 8px; margin-bottom: 14px; }
.q-inc { border: 1px solid var(--q-line); border-radius: 9px; padding: 9px 11px; }
.q-inc.none { color: var(--q-dim); font-size: 11.5px; }
.q-inc-t { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 3px; }
.q-inc-t b { font: 700 11px var(--mono); color: var(--q-ink); }
.q-inc-t span { font: 10.5px var(--mono); color: #b08a3a; white-space: nowrap; }
.q-inc p { font-size: 12px; line-height: 1.5; color: var(--q-ink); margin: 0 0 4px; }
.q-inc small { font-size: 10.5px; line-height: 1.5; color: var(--q-dim); display: block; }
.q-d-foot { font: 10.5px/1.6 var(--mono); color: var(--q-dim); border-top: 1px dashed var(--q-line); padding-top: 10px; }

.q-bars { display: grid; gap: 10px; margin-bottom: 14px; }
.q-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; }
.q-bar span { font-size: 11.5px; color: var(--q-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-bar b { font: 700 12px var(--mono); color: var(--q-acc); }
.q-bar em { grid-column: 1 / -1; display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--q-line) 60%, transparent); overflow: hidden; }
.q-bar em i { display: block; height: 100%; border-radius: 4px; background: var(--q-acc); }