/* Ops Appr[AI]ser — product UI mocks.
   Vector stand-ins for the app screenshots: crisp at any resolution, on-brand,
   and scaled as a whole by the single container-relative font-size on .mk.
   Everything inside .mk is sized in em, so nothing needs a second breakpoint. */

.shot-mock{container-type:inline-size;background:#08131f}
.mk{
  font-size:clamp(10px,1.06cqw,13px);
  font-family:var(--oa-font-sans);
  font-weight:400;line-height:1.45;
  color:var(--oa-text);
  font-variant-numeric:tabular-nums;
  padding:1.5em 1.6em 1.6em;
}
.mk *{box-sizing:border-box}
.mk b{font-weight:600;color:var(--oa-text-strong)}
.mk-t{font-size:1.4em;font-weight:600;color:var(--oa-text-strong);line-height:1.15}
.mk-sub{font-size:.95em;color:var(--oa-text-muted)}
.mk-dim{color:var(--oa-text-muted)}
.mk-pos{color:var(--oa-go)}

/* ---------- app chrome ---------- */
.mk-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5em}
.mk-btn{display:inline-block;background:#0A7F9F;color:#fff;font-weight:600;font-size:.95em;
  padding:.6em 1.1em;border-radius:var(--oa-radius-sm);white-space:nowrap}
.mk-strip{display:flex;align-items:center;flex-wrap:wrap;gap:.55em 1.3em;margin-top:1.1em;
  font-size:.95em}
.mk-strip .mk-s{color:var(--oa-text-muted);white-space:nowrap}
.mk-div{width:1px;height:1.2em;background:var(--oa-border)}
.mk-pill{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.9em;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.mk-pill::before{content:"";width:.62em;height:.62em;border-radius:50%;background:currentColor}
.mk-go{color:var(--oa-go)}
.mk-rev{color:var(--oa-attention)}
.mk-no{color:var(--oa-no-go)}
.mk-tabs{display:inline-flex;gap:.25em;margin-top:1.1em;padding:.25em;
  border:1px solid var(--oa-border);border-radius:var(--oa-radius-sm);background:#0A1622}
.mk-tabs span{padding:.42em 1em;font-size:.95em;border-radius:4px;color:var(--oa-text-muted)}
.mk-tabs span.on{background:#16283a;color:var(--oa-text-strong);font-weight:600}

/* ---------- nine-quadrant matrix ---------- */
.mk-matrix-grid{display:grid;grid-template-columns:1.5em repeat(3,1fr);gap:.65em;margin-top:1em}
.mk-colhead{text-align:center;font-size:.95em;color:var(--oa-text-muted);padding-bottom:.1em}
.mk-rowhead{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-size:.85em;color:var(--oa-text-muted);letter-spacing:.04em}
.mk-quad{border:1px solid var(--oa-border);border-radius:var(--oa-radius-md);background:#0A1622;
  padding:.85em;min-height:8.2em;display:flex;flex-direction:column;gap:.55em}
.mk-quad-h{display:flex;justify-content:space-between;align-items:baseline;gap:.5em}
.mk-quad-h b{font-size:1.02em}
.mk-quad-h i{font-style:normal;font-size:.9em;color:var(--oa-text-muted)}
.mk-quad p{margin:0;font-size:.88em;color:var(--oa-text-muted);line-height:1.35}
.mk-quad .mk-empty{flex:1;display:flex;align-items:center;justify-content:center;
  color:#25394c;font-size:1.2em}
.mk-proc{border:1px solid var(--oa-border);border-radius:var(--oa-radius-sm);background:#0D1B2A;
  padding:.55em .65em;display:flex;flex-direction:column;gap:.4em}
.mk-proc-t{display:flex;justify-content:space-between;align-items:flex-start;gap:.6em;
  font-weight:600;color:var(--oa-text-strong);font-size:.95em;line-height:1.25}
.mk-proc-t::after{content:"";flex:0 0 auto;width:.55em;height:.55em;border-radius:50%;
  background:var(--oa-go);margin-top:.35em}
.mk-proc-m{display:flex;align-items:center;gap:.55em;font-size:.9em}
.mk-arch{font-weight:600;font-size:.85em;letter-spacing:.06em;padding:.15em .45em;border-radius:3px;
  border:1px solid;color:var(--oa-accent-soft);border-color:#245a6d;background:rgba(11,138,174,.15)}
.mk-arch.v2{color:#a9b6ff;border-color:#3b4680;background:rgba(90,105,200,.16)}
.mk-arch.v3{color:#f0a5c8;border-color:#7a3d5c;background:rgba(200,80,140,.16)}
.mk-legend{display:flex;flex-wrap:wrap;gap:.45em 1.1em;margin-top:.95em;font-size:.88em;
  color:var(--oa-text-muted)}
.mk-key{display:inline-flex;align-items:center;gap:.4em}
.mk-key::before{content:"";width:.55em;height:.55em;border-radius:50%;background:currentColor}

/* ---------- KPI tiles ---------- */
.mk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:.85em;margin-top:1.05em}
.mk-kpi{border:1px solid var(--oa-border);border-radius:var(--oa-radius-md);background:#0A1622;
  padding:.85em 1em}
.mk-kpi span{display:block;font-size:.92em;color:var(--oa-text-muted)}
.mk-kpi b{display:block;font-size:1.8em;font-weight:300;line-height:1.15;margin-top:.1em;
  color:var(--oa-go)}
.mk-select{display:inline-flex;align-items:center;justify-content:space-between;gap:1.4em;
  border:1px solid var(--oa-border);border-radius:var(--oa-radius-sm);background:#0D1B2A;
  padding:.5em .8em;min-width:10.5em;color:var(--oa-text-strong);font-weight:600;font-size:.95em}
.mk-select::after{content:"";width:.42em;height:.42em;border-right:1.5px solid var(--oa-text-muted);
  border-bottom:1.5px solid var(--oa-text-muted);transform:rotate(45deg) translateY(-.15em)}
.mk-rec{color:var(--oa-attention);font-weight:600;font-size:.95em}

/* ---------- charts ---------- */
.mk-charts{display:grid;grid-template-columns:1fr 1fr;gap:.85em;margin-top:.85em}
.mk-panel{border:1px solid var(--oa-border);border-radius:var(--oa-radius-md);background:#0A1622;
  padding:.85em 1em .9em}
.mk-panel-t{font-size:.98em;color:var(--oa-text);margin-bottom:.2em}
.mk-panel svg{width:100%;height:auto;display:block}
.mk-grid-l{stroke:#1a2c3d;stroke-width:1}
.mk-ax{fill:#7C93A8;font-size:11px;font-family:var(--oa-font-sans)}
.mk-dash{stroke:#3a4f61;stroke-width:1;stroke-dasharray:4 4}

/* ---------- vendor table ---------- */
.mk-vtable{width:100%;border-collapse:collapse;margin-top:.9em;font-size:.98em}
.mk-vtable th{font-size:.98em;font-weight:600;letter-spacing:0;text-transform:none;
  padding:0 .8em .65em;text-align:center;color:var(--oa-text-strong)}
.mk-vtable th:first-child{text-align:left;color:var(--oa-text-muted);font-weight:400}
.mk-vtable td{padding:.5em .8em;border-top:1px solid var(--oa-border);text-align:center;
  color:var(--oa-text-strong);vertical-align:middle}
.mk-vtable td:first-child{text-align:left;color:var(--oa-text-muted)}
.mk-v1{color:#6FCBE0}
.mk-v2{color:#a9b6ff}
.mk-v3{color:var(--oa-attention)}
.mk-tag{display:inline-block;font-weight:600;font-size:.85em;letter-spacing:.08em;
  text-transform:uppercase;padding:.28em .7em;border-radius:4px;border:1px solid var(--oa-go);
  color:var(--oa-go);background:rgba(52,199,154,.12)}

/* ---------- assessment form ---------- */
.mk-sec{margin-top:1.35em}
.mk-sec:first-child{margin-top:0}
.mk-sec-t{font-size:1.15em;font-weight:600;color:var(--oa-text-strong);margin-bottom:.85em}
.mk-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:.85em 1em}
.mk-f label{display:flex;align-items:center;gap:.35em;font-size:.92em;color:var(--oa-text);
  margin-bottom:.3em;line-height:1.25}
.mk-f .mk-in{border:1px solid var(--oa-border);border-radius:var(--oa-radius-sm);background:#0D1B2A;
  padding:.5em .7em;color:var(--oa-text-strong)}
.mk-f .mk-in.sel{display:flex;align-items:center;justify-content:space-between;gap:1em}
.mk-f .mk-in.sel::after{content:"";width:.42em;height:.42em;flex:0 0 auto;
  border-right:1.5px solid var(--oa-text-muted);border-bottom:1.5px solid var(--oa-text-muted);
  transform:rotate(45deg) translateY(-.15em)}
.mk-ai{color:var(--oa-sky-teal);font-size:.95em;line-height:1}
.mk-note{font-size:.88em;color:var(--oa-text-muted);margin:-.35em 0 .9em}
.mk-sliders{display:grid;grid-template-columns:1fr 1fr;gap:.9em 2em}
.mk-sl-h{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;font-size:.92em}
.mk-sl-h .l{display:flex;align-items:center;gap:.35em;color:var(--oa-text)}
.mk-sl-h .v{color:var(--oa-text-muted)}
.mk-track{position:relative;height:.38em;border-radius:.19em;background:#16283a;margin-top:.6em}
.mk-track i{position:absolute;left:0;top:0;height:100%;border-radius:.19em;background:var(--oa-accent)}
.mk-track b{position:absolute;top:50%;width:1em;height:1em;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.mk-toggles{display:flex;flex-wrap:wrap;gap:.85em 2em;margin-top:1.05em;font-size:.95em}
.mk-tog{display:inline-flex;align-items:center;gap:.6em;color:var(--oa-text)}
.mk-tog::before{content:"";flex:0 0 auto;width:2em;height:1.05em;border-radius:.53em;
  background:#1b2d3f;box-shadow:inset -1em 0 0 -.27em #6b7d8d}
.mk-tog.on::before{background:var(--oa-accent);box-shadow:inset 1em 0 0 -.27em #fff}

/* Narrow columns: the matrix and the paired charts need one column each. */
@container (max-width:560px){
  .mk-charts{grid-template-columns:1fr}
  .mk-kpis{grid-template-columns:repeat(2,1fr)}
  .mk-fields{grid-template-columns:repeat(2,1fr)}
}

/* Phone-width columns: keep the 3x3 shape legible by dropping the prose. */
@container (max-width:420px){
  .mk{padding:1.1em}
  .mk-matrix-grid{gap:.45em}
  .mk-quad{min-height:6.4em;padding:.6em}
  .mk-quad p,.mk-legend{display:none}
  .mk-vtable th,.mk-vtable td{padding-left:.35em;padding-right:.35em}
}