/* ============================================================
   AI Factory tools — tools.css
   Pages: readiness.html + checklist.html (loaded AFTER style.css).
   Reuses design tokens from style.css :root — only tool-specific
   additions live here. prefers-reduced-motion hard-off is global
   in style.css (section 17) and applies here too.
   ============================================================ */

:root {
  --c-blue-tint: #E8EFFB; /* light blue section-header strip (PDF #DBEAFE-like, tuned to brand blue) */
}

/* === Header back link (header/footer markup otherwise identical to index.html) === */
.header-inner { position: relative; }
.back-link {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-inverse);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: .85;
  transition: opacity var(--t-fast);
}
.back-link:hover, .back-link:focus-visible { opacity: 1; text-decoration: underline; }

/* === Hero-lite === */
.hero-lite { background: var(--c-white); padding: 64px 0 56px; }
.tool-h1 {
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.2;
  font-weight: 600;
  color: var(--c-heading);
  margin-top: 12px;
}
.tool-slash { color: var(--c-blue); margin-right: 4px; }
.tool-lead {
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--c-soft);
  line-height: 1.5;
  max-width: 860px;
  margin-top: 16px;
}
.tool-lead b { font-weight: 700; color: var(--c-text); }
.howto {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-top: 28px;
  max-width: 860px;
}
.howto p { font-size: var(--fs-body); font-weight: 300; color: var(--c-text); line-height: 1.5; }
.howto b { font-weight: 700; }

/* === Sticky toolbar: progress + live counter + reset === */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
}
.toolbar-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.toolbar-track {
  flex: 1 1 auto;
  height: 6px;
  background: var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.toolbar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--c-blue);
  transition: width var(--t-med);
}
.toolbar-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--c-text);
  white-space: nowrap;
}
.toolbar-text b { font-weight: 700; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.tool-reset {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
  padding: 6px 14px;
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tool-reset:hover, .tool-reset:focus-visible { color: var(--c-red-hover); border-color: var(--c-red-hover); }

/* === Tool body === */
.tool-body { background: var(--c-offwhite); }

/* --- Readiness: dimension cards --- */
.dim-card {
  background: var(--c-white);
  border: 1px solid var(--c-blue);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--radius);
  margin-top: 24px;
}
.dim-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  background: var(--c-blue-tint);
  padding: 16px 24px;
}
.dim-title { font-size: 20px; font-weight: 700; color: var(--c-heading); line-height: 1.35; }
.dim-title span { font-weight: 400; }
.dim-score { font-size: 15px; font-weight: 400; color: var(--c-text); white-space: nowrap; }
.dim-score b { font-weight: 700; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.dim-list { padding: 6px 24px 18px; }

/* Statement row with custom square checkbox (thin blue outline, per PDF) */
.stmt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--c-hr);
  cursor: pointer;
}
.stmt:last-child { border-bottom: 0; }
.stmt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 2px 0 0;
  border: 1px solid var(--c-blue);
  border-radius: var(--radius);
  background: var(--c-white);
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast);
}
/* >=44px effective tap target without changing the 20x20 visual */
.stmt input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -12px;
}
.stmt input[type="checkbox"]:checked {
  background-color: var(--c-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4 6-8' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.stmt input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(26,95,212,.25);
}
.stmt-txt { font-size: 16px; font-weight: 400; color: var(--c-text); line-height: 1.5; }

/* --- Readiness: result + interpretation --- */
.result-line { font-size: 24px; font-weight: 700; color: var(--c-heading); margin-top: 48px; }
.result-line b { color: var(--c-blue); font-variant-numeric: tabular-nums; }
.interp { margin-top: 24px; }
.range {
  display: none;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--radius);
  padding: 28px 32px;
}
.range.active { display: block; }
.range-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.range-badge {
  background: var(--c-blue);
  color: var(--c-text-inverse);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.range-name { font-size: 22px; font-weight: 700; color: var(--c-heading); }
.range-body { margin-top: 14px; font-size: 16px; font-weight: 300; line-height: 1.55; color: var(--c-text); }
.range-next {
  margin: 18px 0 0;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--c-blue);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--c-text);
}
.range-next b { font-weight: 700; }
.interp-closing {
  margin-top: 24px;
  font-size: 16px;
  font-weight: 300;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: 860px;
}

/* --- Checklist: section cards (light blue header bar, per PDF) --- */
.chk-card {
  background: var(--c-white);
  border: 1px solid var(--c-blue);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--radius);
  margin-top: 24px;
}
.chk-head {
  background: var(--c-blue-tint);
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--c-heading);
}
.chk-item {
  border: 0;
  margin: 0;
  padding: 18px 24px;
  border-bottom: 1px solid var(--c-hr);
  min-inline-size: auto; /* fieldset reset */
}
.chk-item:last-child { border-bottom: 0; }
.chk-q { font-size: 16px; font-weight: 600; color: var(--c-card-title); line-height: 1.5; padding: 0; }
.chk-no { color: var(--c-blue); font-weight: 700; margin-right: 4px; }

/* Yes / Partly / No segmented radio control */
.seg {
  display: inline-flex;
  margin-top: 12px;
  border: 1px solid var(--c-blue);
  border-radius: var(--radius);
}
.seg-opt { position: relative; }
.seg-opt input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.seg-opt span {
  display: block;
  min-width: 72px;
  text-align: center;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-blue);
  user-select: none;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.seg-opt + .seg-opt span { border-left: 1px solid var(--c-blue); }
.seg-opt:hover input[type="radio"]:not(:checked) + span { background: var(--c-blue-tint); }
.seg-opt input[type="radio"]:checked + span {
  background: var(--c-blue);
  color: var(--c-text-inverse);
}
.seg-opt input[type="radio"]:focus-visible + span {
  box-shadow: 0 0 0 2px rgba(26,95,212,.35);
}

/* --- Checklist: interpretation scenarios --- */
.interp-h {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--c-heading);
  margin-top: 56px;
}
.scen-hint { margin-top: 20px; font-size: 16px; font-weight: 300; color: var(--c-muted); }
.scen-hint b { font-weight: 700; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.scen {
  display: none;
  margin-top: 24px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-blue);
  border-radius: var(--radius);
  padding: 32px;
}
.scen.active { display: block; }
.scen-badge {
  display: inline-block;
  background: var(--c-blue);
  color: var(--c-text-inverse);
  font-weight: 700;
  font-size: 16px;
  padding: 10px 20px;
  border-radius: var(--radius);
}
.scen h3 { font-size: 18px; font-weight: 700; color: var(--c-heading); margin-top: 26px; }
.scen p, .scen li { font-size: 16px; font-weight: 300; line-height: 1.55; color: var(--c-text); }
.scen p { margin-top: 12px; }
.scen ul, .scen ol { margin: 12px 0 0; padding-left: 22px; }
.scen li { margin-top: 8px; }
.scen li > ul { margin-top: 8px; }
.scen-note {
  margin-top: 22px;
  font-style: italic;
  font-weight: 400;
  color: var(--c-blue);
}

/* === Blue CTA panel (shared) === */
.tool-cta { background: var(--c-offwhite); padding-bottom: var(--section-pad); }
.cta-panel {
  background: var(--c-blue);
  color: var(--c-text-inverse);
  border-radius: var(--radius);
  padding: clamp(32px, 5vw, 56px);
}
.cta-panel h2 {
  color: var(--c-text-inverse);
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  line-height: 1.25;
}
.cta-panel h2 .tool-slash { color: var(--c-text-inverse); }
.cta-panel p, .cta-panel li {
  color: rgba(255,255,255,.92);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
}
.cta-panel p { margin-top: 16px; max-width: 760px; }
.cta-panel ul { margin: 16px 0 0; padding-left: 22px; }
.cta-panel li { margin-top: 8px; }
.cta-panel li b { font-weight: 700; }
.cta-panel .button--invert { margin-top: 28px; }

/* Advisor cutout in the CTA panel — photo bleeds to the bottom/right edge, no caption (per PDF) */
.cta-panel { position: relative; overflow: hidden; }
.cta-grid { display: block; }
.cta-content { position: relative; z-index: 1; }
.cta-advisor {
  /* mobile: photo below the content, bleeding into the panel's bottom-right padding */
  margin: 24px calc(-1 * clamp(32px, 5vw, 56px)) calc(-1 * clamp(32px, 5vw, 56px)) auto;
  text-align: right;
  line-height: 0;
}
.cta-advisor img {
  width: min(330px, 76vw);
  height: auto;
  display: inline-block;
  /* light hits the face from the left -> shadow falls to the right */
  filter: drop-shadow(12px 12px 22px rgba(0, 0, 0, .28));
}
@media (min-width: 900px) {
  /* photo intentionally escapes the panel (right + top), shadow follows the cutout silhouette */
  .cta-panel { overflow: visible; padding-right: clamp(340px, 37vw, 480px); }
  .cta-advisor {
    position: absolute;
    right: -26px;
    bottom: 0;
    top: -120px;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    pointer-events: none;
  }
  .cta-advisor img {
    width: auto;
    max-height: 100%;
    max-width: clamp(360px, 40vw, 530px);
    object-fit: contain;
    object-position: bottom right;
    pointer-events: auto;
    filter: drop-shadow(16px 18px 30px rgba(0, 0, 0, .35));
  }
}

/* Hover bubble: Carlos introduces himself with a typewriter effect (built by tools.js).
   Sits ABOVE his head — vertical position (bottom = img height + gap) is set by tools.js,
   because panel height differs between readiness and checklist. */
.cta-bubble {
  position: absolute;
  right: 0;
  bottom: 100%; /* fallback; overridden inline by tools.js */
  width: min(320px, 30vw);
  background: var(--c-white);
  color: var(--c-text);
  padding: 16px 18px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 8px 10px 24px rgba(0, 0, 0, .22);
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
  z-index: 2;
  min-height: 74px;
}
.cta-bubble::after {
  /* tail at the bubble's bottom, pointing down at Carlos's head */
  content: "";
  position: absolute;
  bottom: -9px;
  right: var(--tail-right, 60px);
  border: 9px solid transparent;
  border-bottom: none;
  border-top: 10px solid var(--c-white);
}
.cta-bubble.is-visible { opacity: 1; transform: translateY(0); }
.cta-bubble .cta-bubble-txt::after {
  content: "|";
  color: var(--c-blue);
  font-weight: 600;
  opacity: 0;
}
.cta-bubble.is-typing .cta-bubble-txt::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cta-bubble.is-typing .cta-bubble-txt::after { animation: caretBlink .8s step-end infinite; }
}
@keyframes caretBlink { 50% { opacity: 0; } }
.button--invert {
  background-color: var(--c-white);
  border-color: var(--c-white);
  color: var(--c-blue);
}
/* (cta-logo removed per client feedback 2026-06-12) */

/* mobile: bubble docks to the empty blue space LEFT of Carlos, around shoulder
   height ("trochę pod głową"), shown automatically on scroll. The tail moves
   from the bubble's bottom to its RIGHT side and points at Carlos. */
@media (max-width: 899px) {
  .cta-bubble {
    width: min(150px, 42vw);
    left: 0;
    right: auto;
    font-size: 13px;
    padding: 12px 14px;
  }
  .cta-bubble::after {
    bottom: auto;
    top: var(--tail-top, 18px);
    right: -10px;
    border: 9px solid transparent;
    border-right: 0;
    border-left: 10px solid var(--c-white);
  }
}

/* === Motion (gated; style.css section 17 hard-disables under reduce) === */
@media (prefers-reduced-motion: no-preference) {
  .range.active, .scen.active { animation: panelIn .45s cubic-bezier(.16, 1, .3, 1); }
  @keyframes panelIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .stmt input[type="checkbox"]:checked { animation: tickPop .25s ease; }
  @keyframes tickPop { 50% { transform: scale(1.15); } }
}

/* === Responsive === */
@media (max-width: 599px) {
  /* Mobile header: absolutely positioned back-link overlapped the centered
     logo at ~375px — stack the link above the logo instead. */
  .header-inner {
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .back-link { position: static; transform: none; }
}

@media (max-width: 480px) {
  .toolbar-inner { gap: 12px; }
  .seg { display: flex; }
  .seg-opt { flex: 1 1 0; }
  .seg-opt span { min-width: 0; padding: 8px 10px; }
}

/* ============================================================
   Lead-wall gate (Forbes-style) — built by js/gate.js.
   The lower half of the tool (remaining questions + result) is
   clipped, blurred and faded; a gate card embedding the live
   HubSpot form sits over the fade. Submitting unlocks the rest.
   ============================================================ */
.gate-zone { position: relative; }

/* Faded, blurred, non-interactive preview of the gated content. */
.gated.locked {
  max-height: 260px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  filter: blur(3px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, rgba(0,0,0,.12) 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 28%, rgba(0,0,0,.12) 78%, transparent 100%);
}
/* Unlocked: restore full, sharp, interactive content. */
.gate-zone--open .gated,
.gated:not(.locked) {
  max-height: none;
  filter: none;
  pointer-events: auto;
  user-select: auto;
  -webkit-mask-image: none;
          mask-image: none;
}

/* Gate card pulled up over the fade. In normal flow so it adds its own height. */
.gate {
  position: relative;
  z-index: 5;
  margin-top: -120px;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}
.gate-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
  max-width: 640px;
  width: 100%;
  padding: 40px 40px 32px;
  text-align: center;
}
.gate-eyebrow {
  color: var(--c-blue);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .78rem;
  margin: 0 0 12px;
}
.gate-title {
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--c-text);
}
.gate-lead {
  color: #5b626c;
  margin: 0 auto 24px;
  max-width: 48ch;
}
.gate-form { text-align: left; min-height: 360px; }
.gate-form .hs-form-frame { width: 100%; }

/* Fade the gate out once the form is submitted, before JS removes it. */
.gate--done { transition: opacity .5s ease; opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .gate { margin-top: -90px; }
  .gate-card { padding: 28px 20px 24px; }
}