/* ============================================================
   ui-composer.css — the shared signature composer (composer.js).
   Same component in the landing hero and in the app: band #111A16
   panel (dark in both themes), YOUR CV slot + one JOB OFFER field
   + "Tailor my CV". Tokens: ui-tokens.css (--ui-*).
   ============================================================ */

.cmp {
  --cmp-gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  grid-template-areas:
    "cv job"
    "note cta";
  gap: var(--cmp-gap) 16px;
  padding: 20px;
  border-radius: var(--ui-radius-modal, 16px);
  background: var(--ui-band, #111A16);
  color: var(--ui-band-text, #E9EEEA);
  font-family: var(--ui-sans);
  font-size: var(--ui-fs-ui, 14px);
  box-shadow: var(--ui-shadow-overlay);
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}
.cmp *, .cmp *::before, .cmp *::after { box-sizing: border-box; }
/* The band is dark in both themes: native scrollbars/controls follow it. */
.cmp, .cmp-job { color-scheme: dark; }
.cmp-job { scrollbar-color: rgba(233, 238, 234, .28) transparent; }

.cmp-slot {
  min-width: 0;
  border-radius: var(--ui-radius-card, 12px);
  background: var(--ui-band-2, #1C2721);
  border: 1px solid var(--ui-band-line, #2C3832);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cmp-slot-cv { grid-area: cv; }
.cmp-slot-job { grid-area: job; transition: border-color .15s, box-shadow .15s; }
.cmp-slot-job:focus-within { border-color: var(--ui-accent, #1B7F4B); box-shadow: 0 0 0 3px rgba(27, 127, 75, .35); }
.cmp-slot-cv.is-drag { border-color: var(--ui-band-link, #9FD9B6); border-style: dashed; }

.cmp-eyebrow {
  font-family: var(--ui-mono);
  font-size: 12px;
  letter-spacing: var(--ui-tracking-label, .08em);
  text-transform: uppercase;
  color: var(--ui-band-muted, #A7B3AC);
  margin: 0;
}

/* CV slot — file row */
.cmp-file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cmp-fileicon {
  flex: 0 0 40px; height: 48px; border-radius: 8px;
  background: #F6F5F1; color: #14201B;
  display: inline-flex; align-items: center; justify-content: center;
}
.cmp-filetext { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmp-filename { font-weight: 600; color: var(--ui-band-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-filemeta { font-size: 13px; color: var(--ui-band-muted); display: inline-flex; align-items: center; gap: 6px; }
.cmp-read { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ui-band-muted); flex-wrap: wrap; }
.cmp-read-ok { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cmp-read-ok svg { color: var(--ui-band-link, #9FD9B6); flex: 0 0 auto; }

/* CV slot — dropzone */
.cmp-drop {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 72px; padding: 12px 14px;
  border-radius: 10px; border: 1px dashed var(--ui-band-line, #2C3832);
  background: transparent; color: var(--ui-band-text); cursor: pointer;
  font: inherit; text-align: left;
}
.cmp-drop:hover { border-color: var(--ui-band-muted); }
.cmp-drop:focus-visible { outline: 2px solid var(--ui-band-link); outline-offset: 2px; }
.cmp-drop-icon {
  flex: 0 0 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ui-band-link);
}
.cmp-drop-text { display: flex; flex-direction: column; gap: 2px; }
.cmp-drop-title { font-weight: 500; }
.cmp-drop-title-phone { display: none; font-weight: 500; }
.cmp-drop-hint { font-size: 13px; color: var(--ui-band-muted); }

/* Job field — one textarea for a link OR the full posting */
.cmp-job {
  width: 100%; min-height: 88px; max-height: 320px; resize: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  color: var(--ui-band-text); font-family: var(--ui-sans); font-size: 16px; line-height: 1.5;
  outline: none; overflow-y: auto;
}
.cmp-job::placeholder { color: var(--ui-band-muted); opacity: .85; }
.cmp-job:disabled { opacity: .6; }
.cmp-hint { font-size: 13px; color: var(--ui-band-muted); margin-top: auto; }

/* Foot — trust note / inline inactive reason + CTA */
.cmp-note { grid-area: note; display: flex; align-items: center; min-width: 0; font-size: 13px; color: var(--ui-band-muted); }
.cmp-trust, .cmp-state { display: inline-flex; align-items: center; gap: 8px; line-height: 1.4; }
/* Icon stays beside the FIRST line; message + inline link wrap as one run. */
.cmp-state { flex-wrap: nowrap; align-items: flex-start; }
.cmp-state-msg { display: block; min-width: 0; overflow-wrap: anywhere; }
.cmp-state-msg .cmp-link { display: inline; margin-left: 4px; white-space: nowrap; }
.cmp-state > .cmp-dot { margin-top: calc((1.4em - 7px) / 2); }
.cmp-state > .cmp-spin { margin-top: calc((1.4em - 14px) / 2); }
.cmp-trust svg { flex: 0 0 auto; }
.cmp-state { color: var(--ui-band-text); }
.cmp-dot { width: 7px; height: 7px; border-radius: 999px; background: #F0B35F; flex: 0 0 auto; }
.cmp-state.is-error .cmp-dot, .cmp-err .cmp-dot, .cmp-urlerr .cmp-dot { background: var(--ui-toast-error-dot, #F2766A); }
.cmp-state.is-busy .cmp-dot { background: var(--ui-band-link); }
.cmp-cta { grid-area: cta; display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.cmp-caption { font-size: 13px; color: var(--ui-band-muted); }
.cmp-submit {
  height: var(--ui-control-h, 44px); padding: 0 20px;
  border: 0; border-radius: var(--ui-radius-control, 10px);
  background: var(--ui-accent, #1B7F4B); color: var(--ui-on-accent, #fff);
  font-family: var(--ui-sans); font-size: 15px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
}
.cmp-submit:hover:not(:disabled) { background: var(--ui-accent-hover, #146A3E); }
.cmp-submit:focus-visible { outline: 2px solid var(--ui-band-link); outline-offset: 2px; }
.cmp-submit:disabled, .cmp-submit[aria-disabled="true"] { background: #1F4A33; color: rgba(233, 238, 234, .6); }
.cmp-submit:disabled { cursor: not-allowed; }
.cmp-submit[aria-disabled="true"]:hover { background: #1F4A33; }

.cmp-link {
  background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
  color: var(--ui-band-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cmp-link:hover { color: var(--ui-band-link); }
.cmp-link:focus-visible { outline: 2px solid var(--ui-band-link); outline-offset: 2px; border-radius: 2px; }

.cmp-err { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ui-band-text); }
.cmp-err .cmp-dot { margin-top: 5px; }

.cmp-spin {
  width: 14px; height: 14px; border-radius: 999px; flex: 0 0 auto;
  border: 2px solid rgba(233, 238, 234, .25); border-top-color: var(--ui-band-link, #9FD9B6);
  animation: cmp-spin .8s linear infinite; display: inline-block;
}
@keyframes cmp-spin { to { transform: rotate(360deg); } }

/* Landing progress (guest free run) */
.cmp-progress { display: flex; flex-direction: column; gap: 8px; width: 100%; color: var(--ui-band-text); }
.cmp-progress-top { display: flex; align-items: center; gap: 8px; }
.cmp-progress-bar { height: 6px; border-radius: 999px; background: var(--ui-band-line); overflow: hidden; }
.cmp-progress-bar span { display: block; height: 100%; background: var(--ui-accent); border-radius: inherit; transition: width .4s ease; }

/* Extras: persistent fetch error + staged extension job */
/* No named area: auto-placed full-width into an implicit last row, so an
   empty (display:none) extra adds no trailing gap. */
.cmp-extra { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.cmp-extra:empty { display: none; }
.cmp-urlerr { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; padding: 10px 14px; border-radius: 10px; background: var(--ui-band-2); border: 1px solid var(--ui-band-line); }
.cmp-urlerr-msg { flex: 1 1 200px; min-width: 0; }
.cmp-urlerr-alt { width: 100%; color: var(--ui-band-muted); }
.cmp-staged { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--ui-band-2); border: 1px solid var(--ui-band-line); flex-wrap: wrap; }
.cmp-staged-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cmp-staged-title { font-weight: 600; overflow-wrap: anywhere; }
.cmp-staged-sum { font-size: 13px; color: var(--ui-band-muted); }
.cmp-staged-acts { display: flex; align-items: center; gap: 8px; }
.cmp-btn-light { height: 36px; padding: 0 14px; border-radius: 10px; border: 0; background: #FFFFFF; color: #14201B; font: 500 14px var(--ui-sans); cursor: pointer; }
.cmp-btn-light:disabled { opacity: .5; cursor: not-allowed; }
.cmp-iconbtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ui-band-line); background: transparent; color: var(--ui-band-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }

/* ── Compact variant (in-app, once matches exist — App-Dashboard board) ── */
.cmp.is-compact {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "cv job cta";
  gap: 10px; padding: 10px; box-shadow: none;
}
.cmp.is-compact .cmp-slot { padding: 0; background: transparent; border: 0; gap: 0; }
.cmp.is-compact .cmp-slot-job { background: var(--ui-band-2); border: 1px solid var(--ui-band-line); border-radius: 10px; padding: 0 14px; justify-content: center; }
.cmp.is-compact .cmp-slot-job .cmp-eyebrow,
.cmp.is-compact .cmp-hint,
.cmp.is-compact .cmp-caption,
.cmp.is-compact .cmp-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cmp.is-compact .cmp-job { min-height: 0; height: 42px; padding: 10px 0; font-size: 15px; white-space: nowrap; overflow: hidden; }
.cmp.is-compact .cmp-cta { gap: 0; }
/* Placed by its named area (full-width row 2 here; the phone template gives
   it its own "note" row) — explicit rows would overlap the phone job field. */
.cmp.is-compact.is-blocked .cmp-note { position: static; width: auto; height: auto; clip: auto; white-space: normal; grid-area: note; }
.cmp.is-compact.is-blocked { grid-template-areas: "cv job cta" "note note note"; }
.cmp-chip {
  height: 44px; padding: 0 14px; border-radius: 10px; max-width: 260px;
  background: var(--ui-band-2); border: 1px solid var(--ui-band-line); color: var(--ui-band-text);
  display: inline-flex; align-items: center; gap: 8px; font: 13px var(--ui-sans); cursor: pointer;
}
.cmp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-chip:focus-visible { outline: 2px solid var(--ui-band-link); outline-offset: 2px; }

/* Compact bar: no step numbers (single row). */
.cmp.is-compact .cmp-step { display: none; }

/* Compact bar, desktop: CV control, job field and CTA are three equal 44px
   boxes on one top line. Cells align to the start so extra lines (upload
   error, blocked note) sit BELOW the controls instead of stretching one box. */
@media (min-width: 721px) {
  .cmp.is-compact { --cmp-bar-h: var(--ui-control-h, 44px); align-items: start; }
  .cmp.is-compact .cmp-slot-cv { max-width: 260px; }
  .cmp.is-compact .cmp-slot-job { height: var(--cmp-bar-h); }
  .cmp.is-compact .cmp-job { height: 100%; }
  .cmp.is-compact .cmp-cta { min-height: var(--cmp-bar-h); }
  /* "Your CV" eyebrow + drop hint: visually hidden like the job label (the
     drop button keeps its full accessible name). */
  .cmp.is-compact .cmp-slot-cv .cmp-eyebrow,
  .cmp.is-compact .cmp-drop-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* No CV: one-line dropzone at bar height. */
  .cmp.is-compact .cmp-drop { height: var(--cmp-bar-h); min-height: 0; padding: 0 14px; gap: 8px; }
  .cmp.is-compact .cmp-drop-icon { flex: 0 0 auto; width: auto; height: auto; background: none; }
  .cmp.is-compact .cmp-drop-text { min-width: 0; }
  .cmp.is-compact .cmp-drop-title { display: none; }
  .cmp.is-compact .cmp-drop-title-phone { display: inline; font-size: 14px; white-space: nowrap; }
  /* Reading: the file row becomes a chip-shaped box of the same height. */
  .cmp.is-compact .cmp-file { height: var(--cmp-bar-h); padding: 0 14px; gap: 8px; border-radius: 10px; background: var(--ui-band-2); border: 1px solid var(--ui-band-line); }
  .cmp.is-compact .cmp-fileicon { flex: 0 0 auto; width: auto; height: auto; background: none; color: var(--ui-band-muted); }
  .cmp.is-compact .cmp-filetext { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
  .cmp.is-compact .cmp-filemeta { white-space: nowrap; }
  /* Upload error under the dropzone: wraps within the CV column (width 0 +
     min-width 100% keeps long text from widening the auto track). */
  .cmp.is-compact .cmp-slot-cv .cmp-err { width: 0; min-width: 100%; margin-top: 8px; }
}

/* ── Phone (Landing-Mobile 390w board): stacked, full width, never compact ── */
@media (max-width: 720px) {
  .cmp, .cmp.is-compact, .cmp.is-compact.is-blocked {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cv" "job" "note" "cta";
    gap: 10px; padding: 12px;
  }
  .cmp-slot { padding: 14px; gap: 10px; }
  .cmp .cmp-step { display: inline; }
  /* CV slot: one-line 64px "Choose PDF or TXT" target (board), no hint. */
  .cmp-drop { min-height: 0; height: 64px; padding: 0 14px; justify-content: center; gap: 10px; }
  .cmp-drop-icon { flex: 0 0 auto; width: auto; height: auto; background: none; color: var(--ui-band-muted); }
  .cmp-drop-text { flex-direction: row; }
  .cmp-drop-title, .cmp-drop-hint { display: none; }
  .cmp-drop-title-phone { display: inline; font-size: 14px; }
  /* Job field: board has no service hint on phone; 88px text area. */
  .cmp-hint { display: none; }
  .cmp-job { min-height: 88px; }
  .cmp-note:empty { display: none; }
  .cmp.is-compact .cmp-slot { padding: 12px 14px; background: var(--ui-band-2); border: 1px solid var(--ui-band-line); border-radius: 12px; gap: 8px; }
  .cmp.is-compact .cmp-slot-job .cmp-eyebrow { position: static; width: auto; height: auto; clip: auto; }
  .cmp.is-compact .cmp-job { height: auto; min-height: 72px; white-space: normal; padding: 0; }
  .cmp.is-compact .cmp-note, .cmp.is-compact .cmp-caption { position: static; width: auto; height: auto; clip: auto; white-space: normal; }
  .cmp.is-compact .cmp-chip { height: auto; padding: 0; border: 0; background: none; max-width: 100%; }
  .cmp-cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .cmp-cta .cmp-caption { order: 2; text-align: center; font-size: 12px; line-height: 1.5; }
  .cmp-submit { width: 100%; height: 48px; font-size: 16px; }
  .cmp-note { justify-content: flex-start; text-align: left; padding: 0 2px; }
  .cmp-note:has(> .cmp-trust:only-child) { display: none; }
  .cmp-note .cmp-trust { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-spin { animation-duration: 2.4s; }
  .cmp-progress-bar span { transition: none; }
}