.face-observation-review { margin:0 0 24px; padding:23px; border:1px solid #dddceb; border-radius:16px; background:linear-gradient(135deg,#fff,#fafbff); color:#514c66; }
.face-observation-review>.eyebrow { color:#8275a1; }
.face-observation-review h4 { margin:8px 0; font-size:16px; font-weight:600; line-height:1.65; }
.face-observation-intro,.face-observation-note { margin:10px 0; color:#827a93; font-size:11px; line-height:1.9; }
.face-observation-empty { padding:17px; border:1px dashed #dcd7e7; border-radius:10px; background:#fcfbff; font-size:12px; line-height:1.9; color:#82768d; }
.face-observation-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.face-observation-stats>div { padding:13px 14px; border:1px solid #e6e2ee; border-radius:10px; background:#fff; min-width:0; }
.face-observation-stats span { display:block; font-size:10px; color:#8a8199; line-height:1.6; }
.face-observation-stats strong { display:block; margin-top:8px; font-size:15px; color:#655778; font-weight:600; }
.face-observation-chart { width:100%; height:auto; display:block; overflow:visible; margin:20px 0 10px; cursor:crosshair; }
.face-observation-track { fill:#f3f1f8; }
.face-observation-grid { stroke:#e2deeb; stroke-dasharray:4 4; }
.face-observation-axis { fill:#9a90a8; font-size:15px; font-family:inherit; }
.face-observation-cursor { stroke:#645a79; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.face-observation-controls { display:flex; gap:15px; align-items:center; margin-top:18px; }
.face-observation-position-label { display:flex; align-items:center; flex:1; gap:14px; font-size:11px; color:#7d738d; }
.face-observation-position { min-width:0; flex:1; accent-color:#7d69a8; cursor:pointer; }
.face-observation-current-time { min-width:42px; font-size:12px; font-variant-numeric:tabular-nums; color:#655579; }
.face-observation-current-state { font-size:11px; line-height:1.8; color:#786c89; }
.face-observation-current-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.face-observation-current-row { border-left:3px solid #9b88bc; padding:5px 10px; font-size:10px; line-height:1.7; color:#8b8199; }
.face-observation-current-row:nth-child(2) { border-color:#3d9292; }.face-observation-current-row:nth-child(3) { border-color:#b18b46; }.face-observation-current-row:nth-child(4) { border-color:#7388be; }
.face-observation-current-row strong { display:block; color:#645672; font-size:15px; font-variant-numeric:tabular-nums; }
.face-observation-events { margin-top:16px; border-top:1px solid #e8e3ef; padding-top:14px; }
.face-observation-events summary { cursor:pointer; font-size:11px; color:#796b8b; padding:5px 0; }
.face-observation-event-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.face-observation-event { padding:8px 11px; min-height:36px; border:1px solid #e3dcec; border-radius:8px; background:#fff; color:#7d6993; font-size:10px; line-height:1.6; text-align:left; }
.face-observation-model { margin:17px 0 0; color:#9f96ab; font-size:9px; overflow-wrap:anywhere; }
@media(max-width:650px) { .face-observation-review { padding:17px; } .face-observation-stats { grid-template-columns:1fr; gap:8px; } .face-observation-stats>div { display:flex; align-items:center; justify-content:space-between; gap:8px; } .face-observation-stats strong { margin:0; }.face-observation-current-values { grid-template-columns:repeat(2,minmax(0,1fr)); }.face-observation-position-label { flex-direction:column; align-items:stretch; gap:4px; } }

/* Keep the recording visible while the reviewer explores the motion timeline. */
.review-observation-layout { display:grid; gap:20px; align-items:start; margin:24px 0; }
.review-observation-layout > .review-media { min-width:0; margin:0; }
.review-observation-layout > .face-observation-review { min-width:0; margin:0; }
@media(min-width:1200px) {
  .review-observation-layout { grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); }
  .review-observation-layout > .review-media { position:sticky; top:12px; align-self:start; }
  .review-observation-layout > .review-media video { max-height:min(340px,calc(100dvh - 280px)); object-fit:contain; }
  .review-observation-layout .face-observation-axis { font-size:24px; }
  .review-observation-layout .face-observation-current-values { grid-template-columns:repeat(2,minmax(0,1fr)); }
}