/* /test — assessment landing page and app mount point */

.test-page{padding-bottom:80px}

.test-intro{
  background:radial-gradient(900px 420px at 20% -20%, rgba(79,168,216,.16), transparent 60%), var(--navy);
  color:#fff;
  padding:64px 0 56px;
}
.test-intro .eyebrow{color:var(--accent-light)}
.test-intro h1{font-size:2.1rem;color:#fff;margin-bottom:.4em}
.test-lead{color:rgba(255,255,255,.78);font-size:1.05rem;margin-bottom:0}

.test-mount-section{padding:48px 0 8px}

/* The mount point itself — the app replaces whatever is inside. */
.app-mount{
  min-height:520px;
  display:flex;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--paper-soft);
  overflow:hidden;
}
.app-mount > *{flex:1}

/* Embedded app, when mounted via iframe (WEG 1) */
.app-frame{
  width:100%;
  min-height:720px;
  border:0;
  display:block;
  background:var(--paper);
}

/* Placeholder shown until the software is connected */
.app-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:64px 32px;
  gap:6px;
}
.app-placeholder-icon{
  width:56px;height:56px;border-radius:14px;
  background:rgba(79,168,216,.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.app-placeholder-icon svg{
  width:28px;height:28px;
  stroke:var(--accent-dark);fill:none;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.app-placeholder h2{font-size:1.2rem;color:var(--navy);margin-bottom:.3em}
.app-placeholder p{color:var(--ink-soft);font-size:.95rem;max-width:460px;margin:0 0 .6em}
.app-placeholder-hint{font-size:.85rem !important;color:var(--ink-soft)}
.app-placeholder-hint a{color:var(--accent-dark);font-weight:600}

.test-start{display:flex;justify-content:center;margin-top:28px}

.test-notes{padding:56px 0 0}
.test-notes h2{font-size:1.3rem;color:var(--navy);margin-bottom:1em}
.test-note-list li{
  position:relative;
  padding-left:24px;
  margin-bottom:.85em;
  color:var(--ink-soft);
  font-size:.95rem;
}
.test-note-list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:50%;background:var(--accent);
}
.test-note-list strong{color:var(--navy)}

@media (max-width:760px){
  .test-intro{padding:48px 0 40px}
  .test-intro h1{font-size:1.6rem}
  .app-mount{min-height:380px}
  .app-placeholder{padding:48px 22px}
}