/* ==========================================================================
   ElitJob · Shared components
   Used by more than one page type (home, tool pages, news). Loaded everywhere.
   ========================================================================== */


/* ---------- Score dial ---------- */
.ej-dial { position: relative; display: block; inline-size: 54px; block-size: 54px; flex: none; }
.ej-dial svg { inline-size: 100%; block-size: 100%; display: block; transform: rotate(-90deg); }
[dir="rtl"] .ej-dial svg { transform: rotate(-90deg) scaleY(-1); }  /* fill runs anticlockwise in RTL */
.ej-dial__track { fill: none; stroke: var(--ej-blue-100); stroke-width: 6; }
.ej-dial__fill {
  fill: none; stroke: var(--ej-blue); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: var(--circ, 138);
  stroke-dashoffset: var(--circ, 138);
  transition: stroke-dashoffset 1.5s cubic-bezier(.25,.85,.3,1);
}
.ej-dial__fill.is-full { stroke-dashoffset: var(--off, 34); }
.ej-dial__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ej-font-head); font-weight: 700; font-size: 15px; color: var(--ej-ink);
}

/* ---------- Demo / result shell ---------- */
.ej-demo {
  background: #fff;
  border-radius: var(--ej-r-lg);
  box-shadow: var(--ej-sh-lg);
  padding: clamp(16px, 2.4vw, 26px);
  position: relative;
  overflow: hidden;
}
.ej-demo::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px;
  background: linear-gradient(90deg, var(--ej-blue), var(--ej-blue-300), var(--ej-amber));
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform 1.1s cubic-bezier(.3,.8,.3,1);
}
.ej-demo.is-live::before { transform: scaleX(1); }
.ej-demo__bar {
  display: flex; align-items: center; gap: 8px;
  padding-block-end: 14px; margin-block-end: 16px;
  border-block-end: 1px solid var(--ej-line);
  font-size: 12px; font-weight: 600; color: var(--ej-muted);
}
.ej-demo__dots { display: flex; gap: 5px; margin-inline-end: 6px; }
.ej-demo__dots i { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ej-line-2); }
.ej-demo__live {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ej-success); font-size: 11.5px;
}
.ej-demo__live b { inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; }
.ej-demo.is-live .ej-demo__live b { animation: ej-blink 1.6s ease-in-out infinite; }
@keyframes ej-blink { 50% { opacity: .25; } }

/* ---------- Keyword chip row ---------- */
.ej-kwrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Optimizer document + cover-letter typewriter ---------- */
/* ---------- optimizer demo: the finished document, as the tool returns it --- */
.ej-dC__sheet {
  background: #fff; border: 1px solid var(--ej-line);
  border-radius: var(--ej-r-sm); padding: 18px 20px;
}
.ej-dC__name { font-family: var(--ej-font-head); font-size: 16px; font-weight: 700; color: var(--ej-ink); }
.ej-dC__role { font-size: 12px; color: var(--ej-muted); margin-block-start: 2px; }
.ej-dC__lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--ej-blue);
  margin-block: 16px 0;
}
.ej-dC__actions { display: flex; gap: 10px; margin-block-start: 16px; flex-wrap: wrap; }
.ej-dC__lines { margin-block-start: 10px; display: grid; gap: 8px; }
.ej-dC__lines li {
  font-size: 12.5px; line-height: 1.55; color: var(--ej-text);
  background: var(--ej-soft); border-radius: var(--ej-r-xs); padding: 9px 12px;
  border-inline-start: 3px solid var(--ej-success);
}
.ej-dC__lines li b { color: var(--ej-ink); background: var(--ej-success-bg); padding: 1px 4px; border-radius: 4px; font-weight: 600; }

/* --- demo D: cover letter typing --- */
.ej-dD__meta { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 14px; }
.ej-dD__sheet {
  background: var(--ej-soft); border-radius: var(--ej-r-md);
  padding: 20px; min-block-size: 236px;
  font-size: 13px; line-height: 1.72; color: var(--ej-text);
}
.ej-dD__sheet p + p { margin-block-start: 12px; }
.ej-dD__sheet strong { color: var(--ej-ink); }
.ej-type::after {
  content: ""; display: inline-block;
  inline-size: 2px; block-size: 1em; margin-inline-start: 2px;
  background: var(--ej-blue); vertical-align: text-bottom;
  animation: ej-caret .9s step-end infinite;
}
.ej-type.is-done::after { display: none; }
@keyframes ej-caret { 50% { opacity: 0; } }
.ej-dD__actions { display: flex; gap: 10px; margin-block-start: 16px; flex-wrap: wrap; }

/* ---------- Article card ---------- */
.ej-art {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--ej-r-md);
  overflow: hidden; box-shadow: var(--ej-sh);
  transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s;
}
.ej-art:hover { transform: translateY(-6px); box-shadow: var(--ej-sh-lg); }
.ej-art__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ej-line); }
.ej-art__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.ej-art:hover .ej-art__media img { transform: scale(1.06); }
.ej-art__cat {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px;
  font-size: 11.5px; font-weight: 600; color: #fff;
  padding: 5px 12px; border-radius: var(--ej-r-pill);
  backdrop-filter: blur(4px);
}
.ej-art__cat--tips    { background: var(--ej-cat-tips); }
.ej-art__cat--hiring  { background: var(--ej-cat-hiring); color: #06432C; }
.ej-art__cat--growing { background: var(--ej-cat-growing); }
.ej-art__body { padding: 17px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.ej-art__body h3 { font-size: 16px; line-height: 1.35; }
.ej-art__date { font-size: 12px; color: var(--ej-muted-2); margin-block-start: 9px; }
.ej-art__body p { font-size: 13.5px; margin-block-start: 10px; line-height: 1.6; }
.ej-art__more {
  margin-block-start: auto; padding-block-start: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; font-weight: 600; color: var(--ej-blue);
}
.ej-art__more svg { transition: transform .22s; }
.ej-art:hover .ej-art__more svg { transform: translateX(4px); }
[dir="rtl"] .ej-art:hover .ej-art__more svg { transform: scaleX(-1) translateX(4px); }

/* ---------- Dial readout ---------- */
/* Dial readout: number over unit, tightly stacked inside the ring */
.ej-dial__num {
  grid-auto-flow: row;
  align-content: center;
  line-height: 1;
  text-align: center;
}
.ej-dial__num small {
  display: block;
  line-height: 1;
  margin-block-start: 3px;
  font-weight: 600;
}