frontend/src/pages/PreInterview.css

.pi-shell { min-height:100dvh; display:flex; flex-direction:column; background:var(--bg-base); }
.pi-bar { height:52px; border-bottom:1px solid var(--border); background:var(--bg-elevated); display:flex; align-items:center; justify-content:space-between; padding:0 var(--space-6); position:sticky; top:0; z-index:var(--z-nav); }
.pi-bar__brand { display:flex; align-items:center; gap:var(--space-2); font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); }
.pi-bar__step  { font-size:var(--text-sm); color:var(--text-muted); font-weight:500; }
.pi-body { flex:1; display:grid; grid-template-columns:1fr 360px; gap:var(--space-8); max-width:1000px; margin:0 auto; width:100%; padding:var(--space-8) var(--space-6); align-items:start; }
.pi-left { display:flex; flex-direction:column; gap:var(--space-6); }
.pi-left__title { font-family:var(--font-display); font-size:var(--text-3xl); font-weight:700; letter-spacing:-0.02em; }
.pi-left__sub   { font-size:var(--text-base); color:var(--text-secondary); margin-top:var(--space-2); }
.pi-video-wrap { border-radius:var(--radius-xl); overflow:hidden; aspect-ratio:4/3; background:var(--stone-800); border:1.5px solid var(--border-medium); }
.pi-video { width:100%; height:100%; object-fit:cover; display:block; transform:scaleX(-1); }
.pi-video-error { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-3); color:var(--text-muted); font-size:var(--text-sm); text-align:center; padding:var(--space-6); }
.pi-checks { display:flex; flex-direction:column; gap:var(--space-3); }
.pi-check { display:flex; align-items:center; gap:var(--space-3); }
.pi-check__icon { width:28px; height:28px; border-radius:50%; background:var(--bg-surface); border:1.5px solid var(--border-medium); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-muted); }
.pi-check__icon svg { width:14px; height:14px; }
.pi-check__icon.done { background:var(--success-glow); border-color:var(--success); color:var(--success); }
.pi-check__icon.optional { border-color:var(--border-medium); }
.pi-check__label { font-size:var(--text-sm); font-weight:500; flex:1; }
.pi-begin { width:100%; justify-content:center; padding:var(--space-4); font-size:var(--text-md); }
.pi-right { display:flex; flex-direction:column; gap:var(--space-5); }
.pi-session-card__title, .pi-tips-card__title { font-size:var(--text-xs); font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-muted); margin-bottom:var(--space-4); }
.pi-session-rows { display:flex; flex-direction:column; gap:var(--space-3); }
.pi-session-row { display:flex; justify-content:space-between; gap:var(--space-4); font-size:var(--text-sm); }
.pi-session-row span:first-child { color:var(--text-secondary); }
.pi-session-row span:last-child  { font-weight:500; text-align:right; }
.pi-tips-list { list-style:none; display:flex; flex-direction:column; gap:var(--space-2); }
.pi-tips-list li { font-size:var(--text-sm); color:var(--text-secondary); padding-left:var(--space-5); position:relative; line-height:1.5; }
.pi-tips-list li::before { content:"·"; position:absolute; left:var(--space-2); color:var(--ascent-blue-500); font-weight:700; font-size:var(--text-lg); }
/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
  .pi-body { grid-template-columns: 1fr 280px; padding: var(--space-6) var(--space-4); }
}

/* Mobile */
@media (max-width: 768px) {
  /* Stack to single column */
  .pi-body { grid-template-columns: 1fr; padding: var(--space-5) var(--space-4); gap: var(--space-5); }
  /* Right panel moves below */
  .pi-right { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
  .pi-right .card { flex: 1; min-width: 240px; }
  /* Video: slightly shorter on mobile */
  .pi-video-wrap { aspect-ratio: 16/9; }
  /* Checks: keep row layout but allow wrap */
  .pi-checks { flex-wrap: wrap !important; gap: var(--space-3) !important; }
  /* Begin button already full-width via .pi-begin */
  .pi-left__title { font-size: var(--text-2xl); }
}

/* Small phone */
@media (max-width: 480px) {
  .pi-body { padding: var(--space-4) var(--space-3); }
  .pi-bar { padding: 0 var(--space-4); }
  .pi-left__title { font-size: var(--text-xl); }
  .pi-right { flex-direction: column; }
  .pi-right .card { min-width: 0; }
}