/* ==========================================================================
   ElitJob · Tool pages (ATS / Analyzer / Optimizer / Cover letter)
   Information order follows the approved mockups:
   hero → input (CV + job description) → run → result → what's next
   ========================================================================== */

.ej-tp { background: var(--ej-bg); padding-block-end: clamp(38px, 5vw, 76px); overflow-x: clip; }

/* ---------- hero ---------- */
.ej-tphero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: center;
  padding-block-end: clamp(24px, 3vw, 44px);
}
/* Smaller than the home page h1: this is a working page, not a pitch. */
.ej-tphero h1 { font-size: clamp(1.32rem, 1rem + 1vw, 1.85rem); line-height: 1.16; }
.ej-tphero__lead { margin-block-start: 10px; font-size: clamp(.86rem, .84rem + .12vw, .94rem); line-height: 1.55; max-width: 52ch; }
.ej-tphero__meta { display: flex; gap: 8px 18px; flex-wrap: wrap; margin-block-start: 16px; font-size: 12.5px; color: var(--ej-muted); }

/* ---------- how the tool is actually used ----------
   Replaces the single paragraph of positioning copy. Three numbered steps in
   the same order as the form below, so the page reads as an instruction. */
.ej-tpsteps { display: grid; gap: 6px; margin-block-start: 14px; }
.ej-tpsteps li {
  display: flex; align-items: flex-start; gap: 9px;
  background: #fff; border-radius: var(--ej-r-sm);
  padding: 8px 11px; box-shadow: var(--ej-sh-sm);
}
.ej-tpsteps li > b {
  flex: none; inline-size: 17px; block-size: 17px; border-radius: 50%;
  background: var(--ej-blue); color: #fff;
  font-size: 10px; font-weight: 700;
  display: grid; place-items: center; margin-block-start: 1px;
}
.ej-tpsteps strong { display: block; font-family: var(--ej-font-head); font-size: 12.5px; color: var(--ej-ink); }
.ej-tpsteps span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--ej-muted); margin-block-start: 1px; }
.ej-tphero__meta li { display: flex; align-items: center; gap: 7px; }
.ej-tphero__meta svg { inline-size: 16px; block-size: 16px; color: var(--ej-blue); flex: none; }

/* small preview card cluster, echoing the mockups' floating cards */
.ej-tpviz { position: relative; }
.ej-tpviz__card {
  background: #fff; border-radius: var(--ej-r-md);
  box-shadow: var(--ej-sh-md); padding: 20px 22px;
  max-inline-size: 380px; margin-inline-start: auto;
}
.ej-tpviz__head { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.ej-tpviz__ico {
  inline-size: 40px; block-size: 40px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--ej-blue-50); color: var(--ej-blue);
}
.ej-tpviz__ico svg { inline-size: 21px; block-size: 21px; }
.ej-tpviz__head strong { display: block; font-family: var(--ej-font-head); font-size: 15px; color: var(--ej-ink); }
.ej-tpviz__head span { display: block; font-size: 12.5px; color: var(--ej-muted); }
.ej-tpviz__float {
  position: absolute; background: #fff;
  border-radius: 13px; box-shadow: var(--ej-sh-lg);
  padding: 11px 14px; font-size: 12px;
}
.ej-tpviz__float--a { inset-block-start: -14px; inset-inline-start: 0; }
.ej-tpviz__float--b { inset-block-end: -18px; inset-inline-start: 6%; }

@media (max-width: 960px) {
  /* The prototype comes first on a phone: it explains the tool faster than
     the copy does, and it is the thing worth seeing without scrolling. */
  .ej-tphero { grid-template-columns: 1fr; gap: 18px; padding-block-end: 20px; }
  .ej-tpviz { order: -1; }
  .ej-tphero__lead { max-width: none; }
}
@media (max-width: 640px) {
  .ej-tphero { gap: 12px; padding-block-end: 16px; }
  .ej-tphero h1 { font-size: clamp(1.18rem, 4.2vw, 1.42rem); }
  .ej-tphero__lead { font-size: 12.5px; margin-block-start: 8px; }
  .ej-field__hint { font-size: 11.8px; margin-block-end: 8px; }
  .ej-form { padding: 14px; }
  .ej-ta { min-block-size: 122px; font-size: 13px; }
  .ej-drop-zone { min-block-size: 122px; padding: 18px 14px; }
  .ej-sub { margin-block-start: 16px; padding-block-start: 16px; }
  .ej-tpsteps { gap: 5px; margin-block-start: 11px; }
  .ej-tpsteps li { padding: 7px 9px; gap: 8px; }
  .ej-tpsteps strong { font-size: 11.8px; }
  .ej-tpsteps span { font-size: 11px; }
  .ej-tphero__meta { gap: 6px 14px; font-size: 11.5px; margin-block-start: 12px; }
}

/* ---------- input panel ---------- */
.ej-form { padding: clamp(18px, 2.6vw, 30px); }
.ej-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 30px); align-items: stretch; }
@media (max-width: 760px) { .ej-form__grid { grid-template-columns: 1fr; } }

/* Two fields can be on different tabs (one Upload, one Paste text with its
   own Clear-text button beneath), which left them different heights and an
   uneven bottom edge. Each field is a flex column so its active pane grows
   to fill the row's full height, and the textarea/drop-zone grows with it. */
.ej-field { display: flex; flex-direction: column; }
/* .ej-srctabs (the Upload/Paste pill group) is a direct child of .ej-field;
   the flex column's default align-items:stretch would otherwise force it
   to the full column width instead of its own compact, inline-flex size. */
.ej-field .ej-srctabs { align-self: flex-start; }
/* :not([hidden]) matters: the hidden pane must stay display:none, not become
   an empty flex box that still reserves height. align-items: flex-start
   keeps the Clear-text button its own compact pill width; without it, the
   column flex context stretches every child (including the button) to the
   full column width by default. */
.ej-field [data-src-pane]:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; flex: 1; }
.ej-field .ej-ta { flex: 1; align-self: stretch; }
.ej-field .ej-drop-zone { flex: 1; align-self: stretch; }
/* The chosen-file card and its size line: full column width like the
   drop-zone they replace, but their own natural (compact) height -- the
   pane around them is already the full stretched height (flex:1 above),
   so the card just sits at the top of it, not stretched to fill it. */
.ej-field .ej-file, .ej-field .ej-hint { align-self: stretch; }

.ej-field__lbl {
  font-size: 11.5px; font-weight: 700; color: var(--ej-muted);
  letter-spacing: .07em; margin-block-end: 6px;
}
/* The note under a field label: what to put in it and where to get it. */
.ej-field__hint {
  font-size: 12.5px; line-height: 1.5; color: var(--ej-muted);
  margin-block-end: 10px; max-width: 54ch;
}
.ej-field__hint b { color: var(--ej-ink); font-weight: 600; }
/* inline warning when a field rejects what was typed */
.ej-only-note {
  font-size: 12px; color: #C9372C; margin-block-start: 6px;
  display: flex; align-items: center; gap: 5px;
}
.ej-only-note[hidden] { display: none; }
.ej-ta--short { min-block-size: 82px; }
.ej-srctabs {
  display: inline-flex; gap: 3px; background: var(--ej-soft);
  padding: 4px; border-radius: var(--ej-r-pill); margin-block-end: 12px;
}
.ej-srctabs button {
  font-size: 13px; font-weight: 600; color: var(--ej-muted);
  padding: 7px 18px; border-radius: var(--ej-r-pill);
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.ej-srctabs button[aria-selected="true"] { background: #fff; color: var(--ej-ink); box-shadow: var(--ej-sh-sm); }

.ej-ta {
  inline-size: 100%; min-block-size: 150px; resize: vertical;
  border: 1.5px solid var(--ej-line); border-radius: var(--ej-r-input);
  padding: 14px 15px; font-size: 13.5px; line-height: 1.6;
  background: #fff; color: var(--ej-text);
  transition: border-color .18s, box-shadow .18s;
}
.ej-ta:focus { outline: none; border-color: var(--ej-blue); box-shadow: 0 0 0 4px var(--ej-blue-50); }
.ej-ta::placeholder { color: var(--ej-muted-2); }

.ej-drop-zone {
  border: 1.5px dashed var(--ej-line-2); border-radius: var(--ej-r-input);
  background: var(--ej-soft);
  padding: 22px 18px; text-align: center;
  min-block-size: 150px;
  display: grid; place-content: center; gap: 8px;
  transition: border-color .18s, background-color .18s;
}
/* JS toggles the empty/chosen state via the hidden attribute; without this,
   the display: grid/flex above beats the UA [hidden]{display:none} rule
   (author styles always win over UA styles), so "hidden" elements kept
   rendering -- both the drop-zone and the file card showed at once. */
.ej-drop-zone[hidden], .ej-file[hidden] { display: none; }
.ej-drop-zone:hover { border-color: var(--ej-blue); background: var(--ej-blue-50); }
.ej-drop-zone svg { inline-size: 26px; block-size: 26px; color: var(--ej-blue); margin-inline: auto; }
.ej-drop-zone strong { font-family: var(--ej-font-head); font-size: 14.5px; color: var(--ej-ink); }
.ej-drop-zone span { font-size: 12.5px; color: var(--ej-muted); }

/* a file already attached, as in the analyzer mockup */
.ej-file {
  display: flex; align-items: center; gap: 11px;
  background: var(--ej-blue-50); border-radius: var(--ej-r-input);
  padding: 12px 14px; font-size: 13.5px; color: var(--ej-ink);
}
.ej-file svg:first-child { inline-size: 17px; block-size: 17px; color: var(--ej-blue); flex: none; }
.ej-file button { margin-inline-start: auto; color: var(--ej-muted); display: grid; }
.ej-file button svg { inline-size: 16px; block-size: 16px; }
.ej-file button:hover { color: var(--ej-error); }

/* extra details block (optimizer / cover letter) */
.ej-sub { margin-block-start: clamp(18px, 2.4vw, 26px); padding-block-start: clamp(18px, 2.4vw, 26px); border-block-start: 1px solid var(--ej-line); }
.ej-sub__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
@media (max-width: 620px) { .ej-sub__grid { grid-template-columns: 1fr; } }
.ej-inp-lbl { display: block; font-size: 13px; font-weight: 600; color: var(--ej-ink); margin-block-end: 7px; }
.ej-inp-lbl em { font-style: normal; font-weight: 400; color: var(--ej-muted); }
.ej-inp, .ej-sel {
  inline-size: 100%; border: 1.5px solid var(--ej-line);
  border-radius: var(--ej-r-input); padding: 12px 14px; font-size: 14px;
  background: #fff; transition: border-color .18s, box-shadow .18s;
}
.ej-sel { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ej-muted) 50%), linear-gradient(135deg, var(--ej-muted) 50%, transparent 50%); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
[dir="ltr"] .ej-sel { background-position: right 18px center, right 12px center; padding-inline-end: 38px; }
[dir="rtl"] .ej-sel { background-position: left 18px center, left 12px center; padding-inline-end: 14px; padding-inline-start: 38px; }
.ej-inp:focus, .ej-sel:focus { outline: none; border-color: var(--ej-blue); box-shadow: 0 0 0 4px var(--ej-blue-50); }
.ej-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ej-text); cursor: pointer; }
.ej-check input { inline-size: 17px; block-size: 17px; accent-color: var(--ej-blue); }
.ej-hint { font-size: 12px; color: var(--ej-muted); margin-block-start: 6px; }

.ej-form__run { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-start: clamp(20px, 2.6vw, 28px); }
.ej-form__note { font-size: 12.5px; color: var(--ej-muted); }

/* ---------- result ---------- */
.ej-res { margin-block-start: clamp(34px, 4.5vw, 58px); }
.ej-res__head { display: flex; align-items: center; gap: 14px; margin-block-end: 22px; }
.ej-res__seal {
  inline-size: 42px; block-size: 42px; flex: none;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--ej-amber); color: #fff;
}
.ej-res__seal svg { inline-size: 22px; block-size: 22px; }
.ej-res__head h2 { font-size: var(--ej-t-h3); }
.ej-res__head p { font-size: 13.5px; color: var(--ej-muted); }

.ej-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
@media (max-width: 700px) { .ej-grid2 { grid-template-columns: 1fr; } }

.ej-panel { background: #fff; border-radius: var(--ej-r-md); box-shadow: var(--ej-sh); padding: clamp(16px, 2.2vw, 24px); }
.ej-panel__h {
  display: flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; color: var(--ej-muted);
  letter-spacing: .06em; margin-block-end: 16px;
}
.ej-panel__h svg { inline-size: 16px; block-size: 16px; }
.ej-panel--ok   .ej-panel__h { color: var(--ej-success); }
.ej-panel--warn .ej-panel__h { color: var(--ej-warning); }
.ej-panel--miss .ej-panel__h { color: var(--ej-error); }
.ej-panel--rec  .ej-panel__h { color: var(--ej-blue); }

.ej-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ej-text); }
.ej-list li + li { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--ej-line); }
.ej-list li > svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 3px; }
.ej-list--ok li > svg { color: var(--ej-success); }
.ej-list--warn li > svg { color: var(--ej-warning); }
.ej-list--rec li > svg { color: var(--ej-blue); }

.ej-quote {
  background: var(--ej-blue-50);
  border-inline-start: 3px solid var(--ej-blue);
  border-radius: 0 var(--ej-r-xs) var(--ej-r-xs) 0;
  padding: 16px 18px; font-size: 14px; line-height: 1.65; color: var(--ej-ink);
}
[dir="rtl"] .ej-quote { border-radius: var(--ej-r-xs) 0 0 var(--ej-r-xs); }

/* score cards */
.ej-scores { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 22px); }
@media (max-width: 620px) { .ej-scores { grid-template-columns: 1fr; } }
.ej-score { background: #fff; border-radius: var(--ej-r-md); box-shadow: var(--ej-sh); padding: 26px 20px; text-align: center; }
.ej-score .ej-dial { inline-size: 128px; block-size: 128px; margin-inline: auto; }
.ej-score .ej-dial__num { font-size: 34px; }
.ej-score .ej-dial__num small { font-size: 12px; color: var(--ej-muted); font-weight: 600; }
.ej-score__note { margin-block-start: 15px; font-size: 13.5px; color: var(--ej-text); }
.ej-score__sub { font-size: 12.5px; color: var(--ej-muted); margin-block-start: 4px; }

/* keyword two-column split */
.ej-kwsplit { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 620px) { .ej-kwsplit { grid-template-columns: 1fr; } }
.ej-kwsplit h6 { font-size: 11.5px; font-weight: 700; color: var(--ej-muted); letter-spacing: .06em; margin-block-end: 11px; font-family: var(--ej-font-body); }

/* rendered CV / letter output */
.ej-out {
  background: var(--ej-soft); border-radius: var(--ej-r-md);
  padding: clamp(20px, 3vw, 38px);
}
/* .ej-doc always holds the API's own result HTML (its own <style>, own box:
   e.g. optimize-cv's ".resume" or the cover letter's ".page", both already
   padded/shadowed/max-width'd for an 8.5in/A4 page) -- so unlike the static
   mockup this replaced, .ej-doc itself carries no padding/shadow/max-width
   of its own, or the two boxes would nest. Kept as a plain centered frame;
   the child/tag rules below are harmless fallbacks for any content that
   doesn't bring its own styling. */
/* Matches js/cv-optimizer.js's renderResult() paperView styling exactly
   (Object.assign(paperView.style, {width:'100%',maxWidth:'740px',...})). */
.ej-doc {
  width: 100%; max-width: 740px; margin-inline: auto;
  background-color: #fff; box-shadow: none; border-radius: 0;
  padding: 0; box-sizing: border-box; color: #222;
  font-family: Inter, sans-serif; overflow: visible;
  font-size: 14px; line-height: 1.7;
}
/* Neutralise the API's own outer box on its two known wrapper classes
   (.resume from optimize-cv, .page from generate-cover-letter -- confirmed
   stable across styles/tones by reading pikajob.net's own cv-style.css,
   which does exactly this for the same API response, padding included) so
   it fills .ej-doc edge to edge instead of nesting its own fixed 8.5in/A4
   card inside ours. */
.ej-doc .resume, .ej-doc .page {
  width: 100% !important; max-width: 100% !important; padding: 30px !important;
  box-shadow: none !important; background: transparent !important; background-color: transparent !important;
}
.ej-doc h3 { font-size: 21px; margin-block-end: 4px; }
.ej-doc__role { font-size: 13.5px; color: var(--ej-blue); font-weight: 600; }
.ej-doc__lbl {
  font-size: 11px; font-weight: 700; color: var(--ej-blue);
  letter-spacing: .09em; margin-block: 22px 9px;
  padding-block-end: 6px; border-block-end: 1px solid var(--ej-line);
}
.ej-doc ul li { position: relative; padding-inline-start: 17px; }
.ej-doc ul li + li { margin-block-start: 8px; }
.ej-doc ul li::before {
  content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: .62em;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--ej-blue-300);
}
.ej-doc p + p { margin-block-start: 13px; }
/* Document toolbar: label left, actions top right, above the preview.
   Buttons sit where the eye lands rather than at the end of a long document,
   so nobody has to scroll past the whole CV to find Download. */
.ej-out__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-block-end: clamp(16px, 2vw, 24px);
}
.ej-out__lbl {
  font-size: 11.5px; font-weight: 700; color: var(--ej-muted);
  letter-spacing: .09em; text-transform: uppercase;
}
.ej-out__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-inline-start: auto; }

@media (max-width: 620px) {
  .ej-out__bar { gap: 10px; }
  .ej-out__actions { inline-size: 100%; margin-inline-start: 0; }
  .ej-out__actions .ej-btn { flex: 1 1 auto; justify-content: center; }
}

/* template style picker */
.ej-tpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.ej-tpl label {
  border: 1.5px solid var(--ej-line); border-radius: var(--ej-r-input);
  padding: 13px 14px; cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.ej-tpl label:hover { border-color: var(--ej-blue-300); }
.ej-tpl input { position: absolute; opacity: 0; pointer-events: none; }
.ej-tpl input:checked + span { color: var(--ej-blue); }
.ej-tpl input:checked ~ small { color: var(--ej-blue); }
.ej-tpl label:has(input:checked) { border-color: var(--ej-blue); background: var(--ej-blue-50); }
.ej-tpl span { display: block; font-family: var(--ej-font-head); font-size: 14px; font-weight: 600; color: var(--ej-ink); }
.ej-tpl small { display: block; font-size: 11.5px; color: var(--ej-muted); margin-block-start: 2px; }

.ej-score .ej-dial__num { line-height: 1; }
.ej-score .ej-dial__num small { margin-block-start: 5px; }

/* ---------- Clear text ----------
   Sits under any paste-text box, mirroring the live portal. */
.ej-clear {
  display: inline-flex; align-items: center; gap: 6px;
  margin-block-start: 9px;
  font-size: 13px; font-weight: 600; color: var(--ej-blue);
  padding: 6px 11px; border-radius: var(--ej-r-xs);
  border: 1px solid var(--ej-line);
  background: #fff;
  transition: background-color .16s, border-color .16s, color .16s;
}
.ej-clear:hover { background: var(--ej-blue-50); border-color: var(--ej-blue-300); }
.ej-clear:disabled { color: var(--ej-muted-2); border-color: var(--ej-line); background: var(--ej-soft); cursor: default; }

/* required-field marker */
.ej-inp-lbl em.is-req { color: var(--ej-error); font-weight: 500; }
.ej-inp.is-bad { border-color: var(--ej-error); background: var(--ej-error-bg); }
.ej-inp.is-bad:focus { box-shadow: 0 0 0 4px var(--ej-error-bg); }
.ej-req-note {
  margin-block-start: 12px; font-size: 13px; font-weight: 500; color: var(--ej-error);
}

/* ---------- editable HTML preview ---------- */
.ej-doc[contenteditable="true"] {
  outline: 2px dashed var(--ej-blue-300);
  outline-offset: 6px;
  background: #fff;
  cursor: text;
}
.ej-doc[contenteditable="true"]:focus { outline-color: var(--ej-blue); }
.ej-out__saved {
  margin-block: -6px 14px; text-align: end;
  font-size: 13px; font-weight: 500; color: var(--ej-success);
}

/* the preview is what gets printed to PDF, so hide the rest of the page */
@media print {
  body > *:not(main), .ej-hdr, .ej-ftr, .ej-crumbs, .ej-tptabs, .ej-tphero,
  .ej-form, .ej-res__head, .ej-demo, .ej-dD__meta, .ej-next,
  .ej-out__actions, .ej-out__saved, .ej-top { display: none !important; }
  .ej-pg, .ej-tp, .ej-out { background: #fff; padding: 0; }
  .ej-doc { box-shadow: none; border: 0; max-inline-size: none; }
}

/* ==========================================================================
   INTERACTIVE PROTOTYPE
   Replaces the static preview card that used to sit beside the tool copy.
   A tablet plays the real flow of the tool from first step to result: the
   cursor moves, clicks, text types itself, the score counts up. Cards are
   allowed to break out of the tablet so the frame does not feel like a box.

   Everything inside is sized in em against .ej-proto, so the whole device
   scales from one font-size and the cursor coordinates stay correct (they are
   measured from getBoundingClientRect, which is post-transform).
   ========================================================================== */
.ej-proto {
  position: relative;
  font-size: clamp(9.4px, .52vw + 5.2px, 12.4px);
  font-family: var(--ej-font-body);
}

/* ---------- the device ---------- */
.ej-proto__frame {
  position: relative;
  border-radius: 2em;
  padding: 1.5em 1.1em;
  background: linear-gradient(158deg, #0B2C69 0%, #04173B 58%, #072256 100%);
  box-shadow:
    0 2.2em 4em rgba(0, 29, 81, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ej-proto__cam {
  position: absolute; inset-block-start: .62em; inset-inline: 0;
  margin-inline: auto;
  inline-size: .42em; block-size: .42em; border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}
.ej-proto__screen {
  position: relative;
  border-radius: 1.1em;
  background: var(--ej-bg);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.ej-proto__chrome {
  display: flex; align-items: center; justify-content: space-between; gap: .8em;
  padding: .85em 1.1em;
  background: var(--ej-navy);
  color: #fff;
}
.ej-proto__logo { font-family: var(--ej-font-head); font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.ej-proto__logo b { background: var(--ej-blue); border-radius: .3em; padding: 0 .32em; margin-inline-start: .18em; }
.ej-proto__step {
  font-size: .82em; font-weight: 700; letter-spacing: .07em;
  color: var(--ej-amber); text-align: end; min-inline-size: 0;
  animation: ej-step-in .42s ease both;
}
@keyframes ej-step-in { from { opacity: 0; transform: translateY(-.25em); } }

/* ---------- the stage: scenes stack, one visible at a time ---------- */
.ej-proto__stage { position: relative; block-size: 17.2em; }
.ej-proto__scene {
  position: absolute; inset: 0;
  padding: 1em;
  display: flex; flex-direction: column; justify-content: center; gap: .8em;
  opacity: 0; visibility: hidden;
  transform: translateY(.7em);
  transition: opacity .42s ease, transform .5s cubic-bezier(.2,.8,.3,1), visibility .42s;
}
.ej-proto__scene.is-on { opacity: 1; visibility: visible; transform: none; }

/* ---------- pieces the scenes are built from ---------- */
.ej-pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.ej-pr-box {
  background: #fff; border: 1px solid var(--ej-line);
  border-radius: .7em; padding: .75em .8em;
  transition: border-color .25s, box-shadow .25s;
  min-inline-size: 0;
}
.ej-pr-box.is-hit { border-color: var(--ej-blue); box-shadow: 0 0 0 .25em var(--ej-blue-50); }
.ej-pr-box.is-done { border-color: var(--ej-success); }
.ej-pr-lbl {
  font-size: .82em; font-weight: 700; letter-spacing: .06em;
  color: var(--ej-muted); margin-block-end: .55em;
}
.ej-pr-line {
  display: block; block-size: .52em; border-radius: .26em;
  background: var(--ej-line-2); margin-block-start: .42em;
}
.ej-pr-line--w90 { inline-size: 90%; }
.ej-pr-line--w75 { inline-size: 75%; }
.ej-pr-line--w60 { inline-size: 60%; }
.ej-pr-line--w45 { inline-size: 45%; }
.ej-pr-box.is-done .ej-pr-line { background: #A9C7FF; }
.ej-pr-txt { font-size: .95em; line-height: 1.5; color: var(--ej-text); }
.ej-pr-txt b { color: var(--ej-ink); font-weight: 600; }

.ej-pr-drop {
  border: 1.5px dashed var(--ej-line-2); border-radius: .7em;
  background: var(--ej-soft);
  padding: 1.5em .8em; text-align: center;
  display: grid; gap: .35em; place-content: center;
  transition: border-color .25s, background-color .25s;
}
.ej-pr-drop.is-hit { border-color: var(--ej-blue); background: var(--ej-blue-50); }
.ej-pr-drop svg { inline-size: 1.5em; block-size: 1.5em; color: var(--ej-blue); margin-inline: auto; }
.ej-pr-drop strong { font-family: var(--ej-font-head); font-size: 1em; color: var(--ej-ink); }
.ej-pr-drop span { font-size: .85em; color: var(--ej-muted); }

.ej-pr-file {
  display: flex; align-items: center; gap: .6em;
  background: var(--ej-blue-50); border-radius: .6em;
  padding: .65em .75em; font-size: .92em; color: var(--ej-ink);
}
.ej-pr-file svg { inline-size: 1.1em; block-size: 1.1em; color: var(--ej-blue); flex: none; }

.ej-pr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  background: var(--ej-amber); color: var(--ej-ink);
  font-family: var(--ej-font-head); font-weight: 700; font-size: 1.02em;
  padding: .78em 1.4em; border-radius: .65em;
  align-self: center;
  transition: transform .18s, box-shadow .18s, background-color .18s;
}
.ej-pr-btn--blue { background: var(--ej-blue); color: #fff; }
.ej-pr-btn--ghost { background: #fff; color: var(--ej-ink); box-shadow: inset 0 0 0 1px var(--ej-line); font-size: .92em; padding: .6em 1em; }
.ej-pr-btn.is-hit { transform: scale(.955); box-shadow: 0 0 0 .3em rgba(255, 180, 43, .32); }
.ej-pr-btn--blue.is-hit { box-shadow: 0 0 0 .3em var(--ej-blue-50); }

.ej-pr-tpl { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5em; }
.ej-pr-tpl > span {
  background: #fff; border: 1px solid var(--ej-line); border-radius: .55em;
  padding: .6em .4em; text-align: center;
  font-size: .85em; font-weight: 600; color: var(--ej-muted);
  transition: border-color .25s, color .25s, background-color .25s;
}
.ej-pr-tpl > span.is-hit { border-color: var(--ej-blue); color: var(--ej-blue); background: var(--ej-blue-50); }

.ej-pr-chips { display: flex; flex-wrap: wrap; gap: .4em; }
.ej-pr-chips .ej-chip { font-size: .85em; padding: .3em .7em; }

.ej-pr-scores { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.ej-pr-score {
  background: #fff; border-radius: .7em; padding: .9em .6em;
  text-align: center; box-shadow: var(--ej-sh-sm);
}
.ej-pr-score > .ej-pr-lbl { margin-block-end: .5em; }
.ej-pr-score .ej-dial { inline-size: 5.4em; block-size: 5.4em; margin-inline: auto; }
.ej-pr-score .ej-dial__num { font-size: 1.5em; }
.ej-pr-score .ej-dial__num small { font-size: .55em; }
.ej-pr-note { font-size: .85em; color: var(--ej-muted); margin-block-start: .5em; }

.ej-pr-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .55em; }
.ej-pr-card {
  background: #fff; border-radius: .6em; padding: .65em .7em;
  border-inline-start: .22em solid var(--ej-line-2);
  opacity: 0; transform: translateY(.6em);
  transition: opacity .45s, transform .45s cubic-bezier(.2,.9,.3,1);
  transition-delay: var(--d, 0ms);
}
.ej-proto__scene.is-on .ej-pr-card { opacity: 1; transform: none; }
.ej-pr-card--ok   { border-inline-start-color: var(--ej-success); }
.ej-pr-card--warn { border-inline-start-color: var(--ej-amber); }
.ej-pr-card--miss { border-inline-start-color: var(--ej-error); }
.ej-pr-card--rec  { border-inline-start-color: var(--ej-blue); }
.ej-pr-card h6 {
  font-family: var(--ej-font-head); font-size: .88em; color: var(--ej-ink);
  margin-block-end: .35em;
}
.ej-pr-card p { font-size: .82em; line-height: 1.45; color: var(--ej-muted); }

.ej-pr-doc {
  background: #fff; border-radius: .7em; padding: .9em 1em;
  box-shadow: var(--ej-sh-sm); overflow: hidden;
}
.ej-pr-doc h6 { font-family: var(--ej-font-head); font-size: 1.05em; color: var(--ej-ink); }
.ej-pr-doc > p { font-size: .82em; color: var(--ej-muted); margin-block-start: .15em; }
.ej-pr-doc__lbl {
  font-size: .78em; font-weight: 700; letter-spacing: .08em;
  color: var(--ej-blue); margin-block: .9em .4em;
}
.ej-pr-doc ul { display: grid; gap: .4em; }
.ej-pr-doc li {
  font-size: .85em; line-height: 1.45; color: var(--ej-text);
  padding-inline-start: .8em; position: relative;
  opacity: 0; transform: translateY(.4em);
  transition: opacity .4s, transform .4s; transition-delay: var(--d, 0ms);
}
.ej-proto__scene.is-on .ej-pr-doc li { opacity: 1; transform: none; }
.ej-pr-doc li::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .55em;
  inline-size: .3em; block-size: .3em; border-radius: 50%; background: var(--ej-blue);
}
.ej-pr-doc li b { color: var(--ej-ink); background: var(--ej-success-bg); border-radius: .25em; padding: 0 .2em; }

.ej-pr-letter {
  background: #fff; border-radius: .7em; padding: 1em 1.1em;
  box-shadow: var(--ej-sh-sm);
  font-size: .88em; line-height: 1.65; color: var(--ej-text);
}
.ej-pr-letter strong { color: var(--ej-ink); }
.ej-pr-letter p + p { margin-block-start: .7em; }

.ej-pr-bar { display: flex; align-items: center; gap: .6em; justify-content: flex-end; }

/* ---------- cards that break out of the tablet ---------- */
.ej-proto__float {
  position: absolute; z-index: 3;
  background: #fff; border-radius: .85em;
  box-shadow: 0 1.2em 2.4em rgba(0, 29, 81, .2);
  padding: .8em 1em;
  display: flex; align-items: center; gap: .6em;
  font-size: 1em;
  opacity: 0; transform: translateY(.8em) scale(.96);
  transition: opacity .45s, transform .5s cubic-bezier(.2,.9,.3,1);
  pointer-events: none;
}
.ej-proto__float.is-on { opacity: 1; transform: none; }
.ej-proto__float svg { inline-size: 1.4em; block-size: 1.4em; flex: none; }
.ej-proto__float strong { display: block; font-family: var(--ej-font-head); font-size: 1.02em; color: var(--ej-ink); }
.ej-proto__float span { display: block; font-size: .85em; color: var(--ej-muted); }
.ej-proto__float--a { inset-block-start: 26%; inset-inline-end: -2.6em; }
.ej-proto__float--b { inset-block-end: 3.4em; inset-inline-start: -2.6em; }

/* ---------- the cursor ---------- */
.ej-proto__cursor {
  /* Physical top/left on purpose: the coordinates come from
     getBoundingClientRect, which is physical, so a logical inset-inline-start
     would flip the origin under dir="rtl" and park the cursor off the device. */
  position: absolute; top: 0; left: 0; z-index: 6;
  inline-size: 1.7em; block-size: 1.7em;
  margin-top: -.2em; margin-left: -.3em;
  pointer-events: none; opacity: 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
  transition: transform .62s cubic-bezier(.35,.02,.2,1), opacity .3s;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19 12l-6.4 1.3L9.6 20Z' fill='%23001D51' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 .25em .4em rgba(0,29,81,.35));
}
.ej-proto.is-live .ej-proto__cursor { opacity: 1; }
/* the tap ring */
.ej-proto__cursor::after {
  content: ""; position: absolute; top: -.35em; left: -.45em;
  inline-size: 2.4em; block-size: 2.4em; border-radius: 50%;
  border: .15em solid var(--ej-blue);
  opacity: 0; transform: scale(.3);
}
.ej-proto__cursor.is-press::after { animation: ej-tap .5s ease-out; }
.ej-proto__cursor.is-press { transform: translate(var(--x, 0px), var(--y, 0px)) scale(.86); }
@keyframes ej-tap {
  0%   { opacity: .85; transform: scale(.3); }
  100% { opacity: 0;   transform: scale(1.1); }
}

/* the caret that follows typed text */
.ej-pr-type::after {
  content: ""; display: inline-block;
  inline-size: .1em; block-size: 1em; margin-inline-start: .12em;
  background: var(--ej-blue); vertical-align: text-bottom;
  animation: ej-caret 1s steps(1) infinite;
}
.ej-proto__scene:not(.is-on) .ej-pr-type::after { animation: none; opacity: 0; }
@keyframes ej-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ---------- the step rail under the device ---------- */
.ej-proto__rail {
  display: flex; gap: .5em; justify-content: center;
  margin-block-start: 1.5em;
}
.ej-proto__rail li {
  display: flex; align-items: center; gap: .45em;
  font-size: .92em; font-weight: 600; color: var(--ej-muted-2);
  transition: color .3s;
}
.ej-proto__rail li::before {
  content: ""; inline-size: .5em; block-size: .5em; border-radius: 50%;
  background: var(--ej-line-2); transition: background-color .3s, transform .3s;
}
.ej-proto__rail li.is-on { color: var(--ej-blue); }
.ej-proto__rail li.is-on::before { background: var(--ej-blue); transform: scale(1.3); }

@media (max-width: 960px) {
  /* On a phone the device stays, but smaller and tighter, so the copy and the
     first form field are still reachable without a long scroll. */
  .ej-proto { font-size: clamp(8px, 2.3vw, 10.6px); max-inline-size: 31em; margin-inline: auto; }
  .ej-proto__stage { block-size: 16.8em; }
  .ej-proto__frame { padding: 1.1em .8em; border-radius: 1.5em; }
  .ej-proto__rail { margin-block-start: 1em; }
  .ej-proto__float--a { inset-block-start: 26%; inset-inline-end: -1em; }
  .ej-proto__float--b { inset-block-end: 2.6em; inset-inline-start: -1em; }
}

@media (prefers-reduced-motion: reduce) {
  .ej-proto__scene, .ej-proto__float, .ej-proto__cursor,
  .ej-pr-card, .ej-pr-doc li { transition: none; }
  .ej-proto__cursor { display: none; }
  .ej-pr-type::after { animation: none; }
}