/* generator-common.css (v3, 2026-07-10)
   Shared layer for ALL generator-lane pages. Loads AFTER satellite-common.css
   and uses its tokens. v3 is the product-UX rework: the form must read as an
   app (numbered steps, unmistakable button), generate must visibly change the
   page (canvas swap / demo demote, result primacy), and every widget style is
   hardened with !important because the site-wide stylesheets (main.css,
   score-main.css) override button/input colors and line-heights.
   House easing everywhere: cubic-bezier(0.2, 0.8, 0.25, 1). Tokens only. */

:root {
  --gen-ease: cubic-bezier(0.2, 0.8, 0.25, 1);
  --gen-paper: #fffdf9;
  --gen-paper-line: #e9e2d6;
  --gen-mint: #e7f3ec;
  --gen-mint-line: #cfe5d8;
}

/* ---------- stacking order: nav above page, modal above nav ----------
   (the modal-poke rule: no page element may ever sit above the site nav) */
#header-wrapper { position: relative; z-index: 30; }
#header-wrapper #nav { z-index: 40 !important; }
.jquery-modal.blocker { z-index: 200 !important; }
.sat { position: relative; z-index: 0; }

/* ---------- the tool card (form): looks like an app, not an illustration ---------- */
.gen-card { background: #fff !important; border: 1px solid var(--line) !important; border-radius: 16px;
  box-shadow: var(--shadow, 0 18px 50px rgba(6, 16, 38, 0.14)); padding: 24px 26px 22px; counter-reset: genstep; }
.gen-card-tag { font-size: var(--fs-micro) !important; font-weight: 700 !important; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent) !important; margin: 0 0 14px !important; line-height: 1.4 !important; }
.gen-card label { display: flex !important; align-items: baseline; gap: 9px; font-size: var(--fs-small) !important;
  font-weight: 600 !important; color: var(--ink) !important; line-height: 1.45 !important; margin: 16px 0 7px !important; }
.gen-card label:first-of-type { margin-top: 0 !important; }
/* numbered steps, free for every page: each label gets its step circle */
.gen-card label::before { counter-increment: genstep; content: counter(genstep); flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff;
  font-size: 0.68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(3px); }
.gen-optional { color: var(--muted) !important; font-weight: 400 !important; }
.gen-card input[type=text], .gen-card select, .gen-card textarea {
  width: 100% !important; box-sizing: border-box !important; border: 1.5px solid #cfd6e0 !important; border-radius: 10px !important;
  padding: 12px 14px !important; font-size: var(--fs-body) !important; line-height: 1.45 !important;
  font-family: inherit !important; color: var(--ink) !important; background: #fff !important;
  height: auto !important; margin: 0 !important; box-shadow: none;
  transition: border-color 180ms var(--gen-ease), box-shadow 180ms var(--gen-ease); }
.gen-card input::placeholder, .gen-card textarea::placeholder { color: #9aa4b2 !important; opacity: 1; }
.gen-card input:focus, .gen-card select:focus, .gen-card textarea:focus {
  outline: none !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.18) !important; }
.gen-card textarea { min-height: 96px !important; resize: vertical; }
/* THE button. Hardened against every site override. */
.gen-go { display: block; width: 100% !important; margin: 18px 0 0 !important; background: var(--accent) !important;
  color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 15px 18px !important;
  font-size: var(--fs-btn) !important; line-height: 1.25 !important; font-weight: 700 !important;
  font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important;
  height: auto !important; cursor: pointer; text-align: center;
  box-shadow: 0 6px 16px rgba(6, 16, 38, 0.18);
  transition: filter 160ms var(--gen-ease), transform 160ms var(--gen-ease), box-shadow 160ms var(--gen-ease); }
.gen-go:hover { filter: brightness(0.94); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(6, 16, 38, 0.24); }
.gen-go:active { transform: translateY(0); }
.gen-go:focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(29, 78, 137, 0.35) !important; }
.gen-go:disabled { opacity: 0.75; cursor: progress; transform: none; }
.gen-go.gen-pulse { animation: genpulse 1.1s var(--gen-ease) 2; }
@keyframes genpulse { 0%, 100% { box-shadow: 0 6px 16px rgba(6, 16, 38, 0.18); }
  50% { box-shadow: 0 0 0 7px rgba(47, 107, 79, 0.25); } }
.gen-note { font-size: var(--fs-tag) !important; color: var(--muted) !important; margin: 9px 2px 0 !important;
  line-height: 1.5 !important; text-align: center; }

/* ---------- generate = a visible state change ----------
   The form yields its spot: form hidden -> skeleton -> result (or gate),
   all in the same place. A back link restores the form. */
form[data-generator][hidden] { display: none !important; }

/* result reveal states */
[data-gen-skeleton], [data-gen-output], [data-gen-next] {
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms var(--gen-ease), transform 420ms var(--gen-ease); }
[data-gen-skeleton][hidden], [data-gen-output][hidden], [data-gen-next][hidden] { display: none; }
.gen-in { opacity: 1 !important; transform: translateY(0) !important; }
[data-gen-output] { margin-top: 18px; scroll-margin-top: 90px; }

/* the result state: a back link, a plain-language title, the artifact */
.gen-result-bar { margin: 0 0 10px; }
.gen-back { background: none !important; border: 0 !important; padding: 0 !important; font-family: inherit !important;
  font-size: var(--fs-tag) !important; font-weight: 600 !important; color: var(--accent) !important;
  cursor: pointer; letter-spacing: 0 !important; height: auto !important; line-height: 1.4 !important; }
.gen-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.gen-result-title { font-size: var(--fs-lead) !important; font-weight: 700 !important; color: var(--ink) !important;
  margin: 0 0 12px !important; line-height: 1.3 !important; }
.gen-draft-tag { position: absolute; top: 16px; right: 84px; font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* skeleton */
.gen-skel { background: var(--gen-paper); border: 1px solid var(--gen-paper-line); border-radius: 12px; padding: 22px 24px; margin-top: 18px; }
.gen-skel-head { font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 6px; }
.gen-skel-bar { height: 12px; border-radius: 6px; background: #ece7db; margin: 13px 0; position: relative; overflow: hidden; }
.gen-skel-bar::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent);
  animation: genshimmer 1.3s infinite; }
@keyframes genshimmer { to { transform: translateX(100%); } }
.gen-skel-bar:nth-child(3) { width: 90%; } .gen-skel-bar:nth-child(4) { width: 76%; }

/* ---------- output artifacts: destination mocks ---------- */
.gen-paper { background: var(--gen-paper); border: 1px solid var(--gen-paper-line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(6, 16, 38, 0.10); padding: 24px 26px 18px; position: relative; }
.gen-paper + .gen-paper { margin-top: 14px; }
.gen-paper::before { content: var(--gen-paper-label, "DRAFT"); display: block; font-size: var(--fs-micro);
  font-weight: 700; letter-spacing: 0.12em; color: var(--ink); padding-bottom: 8px;
  border-bottom: 1px solid var(--gen-paper-line); margin-bottom: 14px; }
.gen-group { display: block; margin: 0 0 13px; opacity: 0; transform: translateY(6px);
  transition: opacity 420ms var(--gen-ease), transform 420ms var(--gen-ease); }
.gen-in .gen-group { opacity: 1; transform: translateY(0); }
.gen-group-label { display: block; font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.gen-group-body { font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-small); color: var(--ink); line-height: 1.55; }
.gen-copy { position: absolute; top: 16px; right: 16px; border: 1px solid var(--gen-paper-line) !important;
  background: #fff !important; border-radius: 7px !important; padding: 4px 11px !important;
  font-size: var(--fs-tag) !important; line-height: 1.4 !important; font-family: inherit !important;
  color: var(--muted) !important; letter-spacing: 0 !important; text-transform: none !important;
  height: auto !important; cursor: pointer;
  transition: color 150ms var(--gen-ease), border-color 150ms var(--gen-ease); }
.gen-copy:hover { color: var(--accent) !important; border-color: var(--accent) !important; }
.gen-copied { color: var(--accent) !important; border-color: var(--accent) !important; }

/* LinkedIn-destination mock */
.gen-li-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(6, 16, 38, 0.10); }
.gen-li-banner { height: 56px; background: linear-gradient(100deg, #a0b4b7, #dce8ea); }
.gen-li-body { padding: 0 22px 18px; }
.gen-li-avatar { width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff; background: #c8d6e5;
  margin-top: -36px; display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #52708c; font-size: var(--fs-lead); }
.gen-li-name { font-weight: 700; color: var(--ink); font-size: var(--fs-lead); margin: 8px 0 2px; }
.gen-li-headline { color: var(--ink); font-size: var(--fs-small); }
.gen-li-meta { color: var(--muted); font-size: var(--fs-tag); margin: 3px 0 12px; }
.gen-li-section-title { font-weight: 700; font-size: var(--fs-small); color: var(--ink); margin: 12px 0 6px; }
.gen-li-card .gen-group-body { font-family: inherit; }

/* error */
.gen-error { background: var(--wash); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; color: var(--muted); font-size: var(--fs-small); }

/* the gate: the card becomes the sell. Calm, authoritative, one action. */
.gen-gate { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 28px;
  box-shadow: var(--shadow, 0 18px 50px rgba(6, 16, 38, 0.14)); text-align: left; }
.gen-gate-head { font-size: var(--fs-lead) !important; font-weight: 700 !important; color: var(--ink) !important;
  margin: 0 0 8px !important; line-height: 1.3 !important; }
.gen-gate-msg { font-size: var(--fs-small) !important; color: var(--muted) !important; line-height: 1.6 !important;
  margin: 0 0 16px !important; }
.gen-gate-link { display: block; box-sizing: border-box; width: 100%; background: var(--accent) !important;
  color: #fff !important; border-radius: 10px !important; padding: 14px 18px !important; font-weight: 700 !important;
  text-decoration: none !important; text-align: center; font-size: var(--fs-btn) !important; line-height: 1.25 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: 0 6px 16px rgba(6, 16, 38, 0.18);
  transition: filter 160ms var(--gen-ease), transform 160ms var(--gen-ease); }
.gen-gate-link:hover { filter: brightness(0.94); transform: translateY(-1px); color: #fff !important; }
.gen-gate-sub { font-size: var(--fs-tag) !important; color: var(--muted) !important; text-align: center;
  margin: 9px 0 0 !important; line-height: 1.4 !important; }

/* ---------- THE CONVERSION BLOCK (attached under the artifact) ----------
   v3: one honest observation in the pen voice, the locked check-teaser, and
   ONE unmistakable button. No embedded upload widgets or iframes here. */
[data-gen-next] { background: var(--gen-mint); border: 1px solid var(--gen-mint-line);
  border-top: 2px dashed #b9cfc2; border-radius: 0 0 12px 12px; padding: 20px 24px 22px; margin-top: -2px; }
.gen-read { margin: 0 0 12px; }
.gen-read-item { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 9px;
  font-size: var(--fs-small); color: var(--ink); line-height: 1.55; }
.gen-read-item .pen { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.gen-next-head { font-size: var(--fs-lead) !important; font-weight: 700 !important; color: var(--ink) !important; margin: 0 0 4px !important; line-height: 1.35 !important; }
.gen-next-sub { font-size: var(--fs-small) !important; color: var(--muted) !important; margin: 0 0 14px !important; line-height: 1.55 !important; }
.gen-locks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.gen-lock { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--gen-mint-line);
  border-radius: 20px; padding: 5px 12px; font-size: var(--fs-tag); color: var(--muted); }
.gen-lock svg { width: 11px; height: 11px; flex: none; }
/* the one next-step button */
.gen-next-cta { display: block; width: 100%; box-sizing: border-box; background: var(--accent) !important;
  color: #fff !important; border: 0 !important; border-radius: 10px !important; padding: 15px 18px !important;
  font-size: var(--fs-btn) !important; line-height: 1.25 !important; font-weight: 700 !important;
  font-family: inherit !important; letter-spacing: 0 !important; text-transform: none !important;
  text-align: center; text-decoration: none !important; cursor: pointer;
  box-shadow: 0 6px 16px rgba(6, 16, 38, 0.18);
  transition: filter 160ms var(--gen-ease), transform 160ms var(--gen-ease); }
.gen-next-cta:hover { filter: brightness(0.94); transform: translateY(-1px); color: #fff !important; }
.gen-next-alt { font-size: var(--fs-tag) !important; margin: 11px 0 0 !important; color: var(--muted) !important;
  text-align: center; line-height: 1.5 !important; }
.gen-next-alt a { color: var(--accent) !important; font-weight: 600; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-gen-skeleton], [data-gen-output], [data-gen-next], .gen-group { opacity: 1; transform: none; transition: none; }
  .gen-skel-bar::after { animation: none; }
  .gen-go.gen-pulse { animation: none; }
}
@media (max-width: 740px) {
  .gen-card { padding: 20px 18px 18px; }
  [data-gen-next] { padding: 18px; }
  .gen-draft-tag { right: 16px; top: -22px; }
}