/* ============================================
   Jobbanalys - page-specific styles
   ============================================ */

/* ============================================
   Typography & Spacing Overrides
   ============================================ */

/* --- Typography --- */


/* section-body + mellan-raderna p → 14px */


/* evidence: uses shared components.css */

/* mellan-raderna .insight p: uses shared components.css */

/* citerad-wrap med citat behåller 16px */
/* citerad-wrap.has-citat strong: uses shared components.css */

/* Step titles */
.step-summary-signal-red {
  color: inherit;
}

.step-summary-signal-green {
  color: inherit;
}



/* Step 6 CV intro inside step body */
.step-collapse-body .tool-intro {
  margin-bottom: var(--space-4);
  padding-left: var(--space-3);
}

.step-collapse-body .tool-intro-tagline {
  font-size: 14px;
}
/* merged into spacing section above */





/* === Help button (reopen intro overlay) === */

.tool-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border, #d0d5dd);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: -1px;
  padding: 0;
  line-height: 1;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.tool-help-btn:hover {
  border-color: var(--color-secondary-teal, #2ba5b5);
  color: var(--color-secondary-teal, #2ba5b5);
  background: rgba(43, 165, 181, 0.06);
}

/* === Syntes (AI-driven) === */
/* Aligned with profilanalys forbattra pattern */

.syntes-intro {
  text-align: center;
  padding: var(--space-4) 0;
}

.syntes-intro-text {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  max-width: 560px;
  margin: 0 auto var(--space-4);
}

.syntes-btn {
  padding: 14px 40px;
  font-size: 14px;
}

.syntes-loading {
  padding: var(--space-6) 0;
  text-align: center;
}

/* Result wrapper */
.syntes-result {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Individual assessment cards */
.syntes-card {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.syntes-card-label {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: var(--font-weight-medium);
}

.syntes-card-rubrik {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}

.syntes-card-text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Recommendation box – verdict at top, color-coded */
.syntes-rekommendation {
  padding: var(--space-5);
  border-radius: var(--radius-card);
}

.syntes-rekommendation-label {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-2);
}

.syntes-rekommendation-rubrik {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.syntes-rekommendation-text {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  margin: 0;
}

/* --- Verdict colors: rekommendation --- */
.syntes-rekommendation.verdict-positive {
  background: rgba(69, 143, 110, 0.07);
}
.syntes-rekommendation.verdict-positive .syntes-rekommendation-label {
  color: #4a8a6b;
}

.syntes-rekommendation.verdict-neutral {
  background: rgba(180, 150, 60, 0.07);
}
.syntes-rekommendation.verdict-neutral .syntes-rekommendation-label {
  color: #9e8840;
}

.syntes-rekommendation.verdict-negative {
  background: rgba(175, 90, 80, 0.07);
}
.syntes-rekommendation.verdict-negative .syntes-rekommendation-label {
  color: #a0605a;
}

/* --- Verdict colors: detail cards (label text only, no border) --- */
.syntes-card.verdict-positive .syntes-card-label {
  color: #4a8a6b;
}

.syntes-card.verdict-neutral .syntes-card-label {
  color: #9e8840;
}

.syntes-card.verdict-negative .syntes-card-label {
  color: #a0605a;
}

/* === Mellan raderna: insight cards === */
/* === Section intro text (under step body heading) === */
/* section-intro: uses shared components.css */
.section-intro {
  margin-bottom: var(--space-4);
}

.mellan-insight {
  background: transparent;
  border-left: none;
  padding-left: 0;
  padding-right: 0;
  margin-bottom: var(--space-4);
}

.mellan-insight strong {
  color: var(--color-text-heading);
}

/* === Coach box (shared design across tools) === */



/* === Sammanfattning: Passar dig / Mindre lämplig === */

.sammanfattning-fit {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.sammanfattning-fit-col {
  flex: 1;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-bg-subtle, #f8f8f8);
}

.sammanfattning-fit-col--passar {
  border-left: none;
}

.sammanfattning-fit-col--mindre {
  border-left: none;
}

.sammanfattning-fit-heading {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.sammanfattning-fit-heading--passar {
  color: var(--color-secondary-teal, #2ba5b5);
}

.sammanfattning-fit-heading--mindre {
  color: var(--color-accent-warm, #e8924a);
}

.sammanfattning-fit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sammanfattning-fit-list li {
  font-size: 14px;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-primary);
  padding-left: var(--space-4);
  position: relative;
  opacity: 0.75;
}

.sammanfattning-fit-col--passar .sammanfattning-fit-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-secondary-teal, #2ba5b5);
  font-weight: var(--font-weight-bold);
}

.sammanfattning-fit-col--mindre .sammanfattning-fit-list li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--color-accent-warm, #e8924a);
  font-weight: var(--font-weight-bold);
}

@media (max-width: 600px) {
  .sammanfattning-fit {
    flex-direction: column;
    gap: var(--space-3);
  }
}

/* === Dealbreakers (Är det värt att söka) === */
.dealbreaker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.dealbreaker-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-subtle, #f8f8f8);
  border-radius: var(--radius-card);
  border-left: none;
}

.dealbreaker-item strong {
  font-size: 15px;
  color: var(--color-text-heading);
}

.dealbreaker-reason {
  font-size: 14px;
  line-height: var(--line-height-relaxed);
  color: rgba(0, 0, 0, 0.7);
}

/* ============================================
   Button overrides: var(--color-primary) palette
   ============================================ */

/* btn-primary/secondary: uses shared --color-primary */
/* v2-file-btn:hover: uses shared v2-input.css */
/* v2-cv-item radio: uses shared v2-input.css */

/* CV/Ad list + history: uses shared v2-input.css + tool-layout.css parchment styles */



/* ============================================
   Header accent: dashed border instead of gradient
   ============================================ */






.v2-file-btn {
  padding: 10px 15px;
}
/* === Loader color override === */

/* === Textarea border + height override === */
.v2-textarea {
  border-color: var(--color-border);
  min-height: 70px;
}

/* === Analyze button inline with secondary actions === */
#analyzeBtn {
  margin-left: auto;
}
/* v2-textarea:hover/:focus: uses shared v2-input.css */



/* === Sticky-to-bottom layout === */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


/* landing-tools: uses shared tool-layout.css */

.landing-tools-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* reset-section: uses shared components.css */





/* Gate mechanism (krav-steget) */
.step-continue--gate {
  flex-wrap: wrap;
}

.gate-question {
  width: 100%;
  margin: var(--space-2) 0 var(--space-3) 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
}

/* === Avvägningar (step 4) === */
.avvagningar-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.avvagning-card {
  padding: var(--space-4);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.avvagning-rubrik {
  display: block;
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-heading);
  margin-bottom: var(--space-2);
}

.avvagning-beskrivning {
  font-size: var(--font-size-small);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2) 0;
}