/* /migrate — assessment page styles. Loaded WITH landing.css (which owns the
   lp-* vocabulary); this file adds only the @font-face declarations (the
   migrate layout self-hosts IBM Plex Mono — no external origins on this
   page, that's its claim) and the page-specific mg-* pieces. */

@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"IBM Plex Mono"; src:url("/fonts/ibm-plex-mono-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

/* animated terminal demo (section [01]; typed by migrate/terminal.js) */
.mg-term{
  /* Explicit width: the section is a flex container, so without it the box
     shrink-wraps to the longest visible line and resizes as the animation
     types. One size, always. */
  width:100%; max-width:680px; margin:18px auto 22px;
  border:1px solid var(--lp-rule-soft); background:#0d0d0d;
  border-radius:10px; overflow:hidden;
}
.mg-term-bar{
  position:relative; display:flex; align-items:center; gap:8px;
  padding:12px 14px 8px; background:#0d0d0d;
}
.mg-term-bar span{ width:12px; height:12px; border-radius:50%; }
.mg-term-bar span:nth-child(1){ background:#ff5f57; }  /* close */
.mg-term-bar span:nth-child(2){ background:#febc2e; }  /* minimize */
.mg-term-bar span:nth-child(3){ background:#28c840; }  /* zoom */
.mg-term-bar em{
  position:absolute; left:0; right:0; text-align:center; pointer-events:none;
  font-style:normal; color:var(--lp-dim); font-size:13px;
}
.mg-term-tabs{
  display:flex; gap:2px; padding:8px 10px 0; background:#0d0d0d;
}
.mg-tab{
  border:0; background:none; color:var(--lp-dimmer); cursor:pointer;
  font-family:var(--lp-mono); font-size:13px; padding:8px 14px;
  border-radius:7px 7px 0 0;
}
.mg-tab:hover{ color:var(--lp-text); }
.mg-tab.is-active{ background:#0a0a0a; color:var(--lp-bright); font-weight:600; }
.mg-term-screen{
  margin:0; padding:18px 20px; background:#0a0a0a;
  /* header casts a soft shadow onto the screen (screen sits a hair above
     pure black so the black penumbra is actually visible) */
  box-shadow:inset 0 14px 18px -12px rgba(0,0,0,.95);
  font-family:var(--lp-mono); font-size:13px; line-height:1.8;
  white-space:pre-wrap; word-break:break-all;
  /* fixed frame sized for the tallest scenario (11 lines) — tab switches
     and the typing loop must never resize the window */
  height:calc(11 * 1.8em + 40px); overflow:hidden;
}
.t-line{ display:block; min-height:1.8em; }
.t-cmd{ color:var(--lp-bright); }
.t-cmd::first-letter{ color:var(--lp-ok); } /* the $ prompt, green like a real shell */
.t-out{ color:var(--lp-dimmer); }
.t-ok{ color:var(--lp-ok); }
.t-dim{ color:var(--lp-faint); }
.t-caret::after{
  content:"█"; color:var(--lp-bright);
  animation:mg-blink 1s steps(1) infinite;
}
@keyframes mg-blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .t-caret::after{ animation:none; }
}

/* dropzone */
.mg-drop{
  border:1px dashed var(--lp-rule); background:var(--lp-panel);
  padding:34px 20px; text-align:center; cursor:pointer; user-select:none;
  color:var(--lp-dim); margin:14px 0 6px;
}
.mg-drop b{ color:var(--lp-bright); font-weight:600; }
.mg-drop:hover{ border-color:var(--lp-accent); color:var(--lp-text); }
.mg-drop-over{ border-color:var(--lp-accent); background:#151007; }
.mg-drop-cap{ color:var(--lp-faint); font-size:13px; margin-top:4px; }

/* prefs row */
.mg-prefs{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:10px 0 2px; color:var(--lp-dim); font-size:14px; }
.mg-prefs label{ cursor:pointer; }
.mg-prefs select{
  background:var(--lp-head); color:var(--lp-text); border:1px solid var(--lp-rule-soft);
  font-family:var(--lp-mono); font-size:14px; padding:2px 6px;
}

/* parse error */
.mg-error{ border:1px solid #a33; background:#180808; color:#f0b0a8; padding:10px 14px; margin:10px 0; font-size:14px; }
.mg-warn{ color:#e8c477; }

/* checks */
.lp-check{ border:1px solid var(--lp-rule-soft); background:var(--lp-panel); margin:8px 0; }
.lp-check summary{ cursor:pointer; padding:9px 12px; display:flex; gap:10px; list-style:none; }
.lp-check summary::-webkit-details-marker{ display:none; }
.lp-check summary:hover{ background:var(--lp-head); }
.mg-mark{ flex:none; }
.lp-check-blocker .mg-mark{ color:#ff5c33; }
.lp-check-warning .mg-mark{ color:var(--lp-accent); }
.lp-check-note .mg-mark{ color:var(--lp-dimmer); }
.lp-check-ok .mg-mark{ color:var(--lp-ok); }
.lp-check-ok summary{ color:var(--lp-faint); }
.mg-check-b{ padding:2px 12px 12px 38px; color:var(--lp-dim); font-size:14px; }
.mg-check-b p{ margin:6px 0; }
.mg-copy-btn{
  background:none; border:1px solid var(--lp-rule); color:var(--lp-link);
  font-family:var(--lp-mono); font-size:13px; padding:4px 10px; cursor:pointer; margin-top:6px;
}
.mg-copy-btn:hover{ border-color:var(--lp-link); background:var(--lp-link-bg); }

/* the plan */
.mg-path-t{ color:var(--lp-bright); font-size:18px; font-weight:600; margin-bottom:6px; }
.mg-sub{ color:var(--lp-faint); margin:14px 0 4px; }
.mg-sub::before{ content:"// "; }
.mg-list{ margin:0 0 6px 22px; color:var(--lp-dim); }
.mg-list li{ margin:4px 0; }

/* form */
.mg-form{ display:grid; gap:12px; max-width:560px; }
.mg-form label{ display:block; color:var(--lp-faint); font-size:13px; margin-bottom:3px; }
.mg-form input[type="text"], .mg-form input[type="email"], .mg-form textarea, .mg-form select{
  width:100%; background:var(--lp-head); color:var(--lp-text);
  border:1px solid var(--lp-rule-soft); font-family:var(--lp-mono);
  font-size:14px; padding:8px 10px;
}
.mg-form input:focus, .mg-form textarea:focus, .mg-form select:focus{ outline:1px solid var(--lp-accent); }
.mg-attach{ display:flex; gap:8px; align-items:baseline; color:var(--lp-dim); font-size:14px; }
.mg-attach input{ accent-color:var(--lp-accent); }
#attach-hint{ color:var(--lp-faint); font-size:13px; }
.mg-sent{ border:1px solid var(--lp-ok); background:#07130a; color:var(--lp-ok); padding:10px 14px; margin:10px 0; }

/* honeypot: off-screen, never display:none (some bots skip those) */
.mg-hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* hash line: long hex must wrap, not overflow */
.mg-hash{ word-break:break-all; }