/* EQ v490.12 WORKING PREVIEW — role configurator visual QA only.
   Forward-only from v490.9. Does not touch accepted report/candidate-register composition. */

/* 1. Compact role hero: working content enters the first viewport sooner. */
body.v340-role-page .wizard-shell{width:min(1220px,calc(100% - 34px))!important;padding-top:20px!important}
body.v340-role-page .wizard-intro{
  display:grid!important;
  grid-template-columns:minmax(0,1.12fr) minmax(390px,.88fr)!important;
  column-gap:42px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:27px 30px 23px!important;
}
body.v340-role-page .wizard-intro>.eyebrow{grid-column:1;grid-row:1;margin:0 0 8px!important}
body.v340-role-page .wizard-intro>h1{grid-column:1;grid-row:2;margin:0 0 11px!important;max-width:680px!important;font-size:clamp(34px,3.45vw,48px)!important;line-height:1.055!important}
body.v340-role-page .wizard-intro>p:not(.eyebrow):not(.mode-hint){grid-column:1;grid-row:3;margin:0!important;max-width:670px!important;font-size:14px!important;line-height:1.57!important}
body.v340-role-page .wizard-intro>.config-mode-switch{grid-column:2;grid-row:1 / span 4;align-self:center;display:grid!important;grid-template-columns:1fr!important;gap:9px!important;margin:0!important;min-width:0!important}
body.v340-role-page .wizard-intro>.hrtech-product-badge{grid-column:1;grid-row:4;justify-self:start;margin-top:12px!important;padding:6px 10px!important;font-size:9px!important}
body.v340-role-page .wizard-intro>.mode-hint{display:none!important}
body.v340-role-page .wizard-intro>.v340-support-strip{grid-column:1 / -1;grid-row:5;margin-top:13px!important;padding:11px 13px!important;min-height:0!important}
body.v340-role-page .wizard-intro>.v340-support-strip i{width:27px!important;height:27px!important;border-radius:9px!important}
body.v340-role-page .wizard-intro>.v340-support-strip b{font-size:12px!important;margin-bottom:2px!important}
body.v340-role-page .wizard-intro>.v340-support-strip span{font-size:10.8px!important;line-height:1.42!important}
body.v340-role-page .progress-wrap{margin:12px 0!important;padding:12px 15px!important}
body.v340-role-page .progress-copy{font-size:10px!important}

/* 2. Canonical logo subtitle: natural word spacing, larger type, nearly title-width. */
body.v340-role-page .topbar .brand.eq-brand-standard:not(.report-brand) .eq-brand-lock-subtitle{
  justify-content:flex-start!important;
  gap:calc(4.1px * var(--eq-brand-scale))!important;
  font-size:calc(12.2px * var(--eq-brand-scale))!important;
  font-weight:570!important;
  letter-spacing:0!important;
  word-spacing:0!important;
}

/* 3. Mode is a semantic choice: HR = cyan/blue; manager = violet. */
body.v340-role-page .config-mode-btn[data-mode="quick"]{
  border-color:rgba(66,205,255,.29)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(71,210,255,.20),transparent 48%),
    linear-gradient(135deg,rgba(42,139,200,.20),rgba(23,70,120,.26))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.v340-role-page .config-mode-btn[data-mode="advanced"]{
  border-color:rgba(170,121,255,.29)!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(183,119,255,.18),transparent 48%),
    linear-gradient(135deg,rgba(101,65,163,.22),rgba(42,42,101,.27))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045)!important;
}
body.v340-role-page .config-mode-btn[data-mode="quick"].active{
  border:2px solid rgba(80,205,255,.74)!important;
  background:radial-gradient(circle at 8% 0%,rgba(75,220,255,.28),transparent 52%),linear-gradient(135deg,rgba(45,151,219,.30),rgba(25,77,129,.31))!important;
  box-shadow:0 0 0 3px rgba(63,187,255,.07),0 12px 30px rgba(20,96,164,.17),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body.v340-role-page .config-mode-btn[data-mode="advanced"].active{
  border:2px solid rgba(181,132,255,.72)!important;
  background:radial-gradient(circle at 8% 0%,rgba(194,134,255,.28),transparent 52%),linear-gradient(135deg,rgba(113,71,185,.31),rgba(49,50,119,.31))!important;
  box-shadow:0 0 0 3px rgba(161,105,255,.07),0 12px 30px rgba(84,52,151,.17),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
body.v340-role-page .config-mode-btn[data-mode="advanced"].active:after{background:rgba(177,125,255,.14)!important;border-color:rgba(190,145,255,.30)!important;color:#eadcff!important}
body.v340-role-page .config-mode-btn{padding:14px 16px!important;min-height:66px!important}
body.v340-role-page .config-mode-btn b{font-size:13px!important}
body.v340-role-page .config-mode-btn span{font-size:10.5px!important;line-height:1.4!important}

/* 4. Step 1 — explain the free-text chain instead of leaving a black box. */
body.v340-role-page .vacancy-description-impact{
  display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  margin-top:9px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(95,181,255,.20);
  background:radial-gradient(circle at 4% 0%,rgba(73,178,255,.13),transparent 52%),linear-gradient(135deg,rgba(33,77,126,.19),rgba(25,46,83,.24));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
body.v340-role-page .vacancy-description-impact b{color:#dff3ff;font-size:10px;white-space:nowrap}
body.v340-role-page .vacancy-description-impact span{color:#aebed6;font-size:10px;line-height:1.48}

/* 5. Step 2 — tasks share one meaning, so use one calm task-glass family. */
body.v340-role-page .wizard-step[data-step="2"] .editable-row{
  border-color:rgba(71,192,220,.18)!important;
  background:radial-gradient(circle at 0 0,rgba(63,207,222,.10),transparent 46%),linear-gradient(105deg,rgba(25,84,105,.20),rgba(18,40,71,.25))!important;
}

/* 6. Step 3 — priority colors follow the semantic priority code, not row order. */
body.v340-role-page .priority-item[data-code="safety_correctness"]{
  border-color:rgba(255,157,92,.30)!important;
  background:radial-gradient(circle at 2% 0%,rgba(255,137,74,.19),transparent 48%),linear-gradient(100deg,rgba(120,65,42,.26),rgba(44,42,63,.31))!important;
}
body.v340-role-page .priority-item[data-code="order_procedure"]{
  border-color:rgba(98,166,255,.28)!important;
  background:radial-gradient(circle at 2% 0%,rgba(78,157,255,.18),transparent 48%),linear-gradient(100deg,rgba(37,75,132,.26),rgba(28,43,77,.31))!important;
}
body.v340-role-page .priority-item[data-code="contact_relationship"]{
  border-color:rgba(238,121,201,.28)!important;
  background:radial-gradient(circle at 2% 0%,rgba(238,108,196,.17),transparent 48%),linear-gradient(100deg,rgba(107,49,99,.24),rgba(40,42,75,.31))!important;
}
body.v340-role-page .priority-item[data-code="clarification_diagnosis"]{
  border-color:rgba(81,214,235,.29)!important;
  background:radial-gradient(circle at 2% 0%,rgba(67,211,230,.17),transparent 48%),linear-gradient(100deg,rgba(28,92,109,.24),rgba(25,47,78,.31))!important;
}
body.v340-role-page .priority-item[data-code="result_progress"]{
  border-color:rgba(88,222,165,.28)!important;
  background:radial-gradient(circle at 2% 0%,rgba(78,218,155,.17),transparent 48%),linear-gradient(100deg,rgba(30,100,76,.24),rgba(25,50,70,.31))!important;
}
body.v340-role-page .priority-item[data-code="autonomy_responsibility"]{
  border-color:rgba(169,126,255,.29)!important;
  background:radial-gradient(circle at 2% 0%,rgba(165,111,255,.18),transparent 48%),linear-gradient(100deg,rgba(83,55,137,.26),rgba(35,42,79,.31))!important;
}
body.v340-role-page .priority-item[data-code="escalation_alignment"]{
  border-color:rgba(255,193,98,.29)!important;
  background:radial-gradient(circle at 2% 0%,rgba(255,184,80,.18),transparent 48%),linear-gradient(100deg,rgba(112,77,34,.24),rgba(44,43,67,.31))!important;
}
body.v340-role-page .priority-item[data-code="flexibility_adaptation"]{
  border-color:rgba(80,218,191,.28)!important;
  background:radial-gradient(circle at 2% 0%,rgba(65,213,184,.17),transparent 48%),linear-gradient(100deg,rgba(25,98,82,.24),rgba(28,48,75,.31))!important;
}
body.v340-role-page .priority-item .priority-index{box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important}

/* 7. Step 4 — autonomy / approval / stop / consequence are different decisions. */
body.v340-role-page .wizard-step[data-step="4"] .responsibility-explainer{
  border-color:rgba(83,196,255,.20)!important;
  background:radial-gradient(circle at 3% 0%,rgba(77,185,255,.12),transparent 48%),linear-gradient(135deg,rgba(32,76,122,.20),rgba(23,45,76,.25))!important;
}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#independently),
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#requiresApproval),
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#stopWorkRule),
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#priceOfError){padding:12px;border-radius:17px;border:1px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#independently){border-color:rgba(77,222,166,.24);background:linear-gradient(145deg,rgba(35,105,83,.23),rgba(21,51,68,.24))}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#requiresApproval){border-color:rgba(102,159,255,.24);background:linear-gradient(145deg,rgba(41,78,139,.23),rgba(25,45,80,.25))}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#stopWorkRule){border-color:rgba(255,184,91,.25);background:linear-gradient(145deg,rgba(118,78,34,.23),rgba(53,46,61,.25))}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#priceOfError){border-color:rgba(242,112,147,.25);background:linear-gradient(145deg,rgba(105,45,66,.23),rgba(52,39,65,.25))}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#independently) textarea{border-color:rgba(77,222,166,.18)!important;background:rgba(13,48,44,.42)!important}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#requiresApproval) textarea{border-color:rgba(102,159,255,.18)!important;background:rgba(18,37,73,.45)!important}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#stopWorkRule) textarea{border-color:rgba(255,184,91,.18)!important;background:rgba(58,42,23,.42)!important}
body.v340-role-page .wizard-step[data-step="4"] label.field:has(#priceOfError) textarea{border-color:rgba(242,112,147,.18)!important;background:rgba(58,28,42,.42)!important}

/* 8. Step 5 — context glass is color-coded by meaning. */
body.v340-role-page .wizard-step[data-step="5"] .quick-context-head{
  border-color:rgba(91,185,255,.20)!important;
  background:radial-gradient(circle at 3% 0%,rgba(75,183,255,.13),transparent 48%),linear-gradient(135deg,rgba(31,72,116,.20),rgba(22,44,77,.25))!important;
}
body.v340-role-page .wizard-step[data-step="5"] .quick-context-grid>div:nth-child(1){border-color:rgba(72,202,244,.24)!important;background:linear-gradient(145deg,rgba(26,91,119,.25),rgba(20,47,76,.28))!important}
body.v340-role-page .wizard-step[data-step="5"] .quick-context-grid>div:nth-child(2){border-color:rgba(174,126,255,.24)!important;background:linear-gradient(145deg,rgba(84,57,139,.24),rgba(37,43,83,.28))!important}
body.v340-role-page .wizard-step[data-step="5"] .quick-context-grid>div:nth-child(3){border-color:rgba(255,176,82,.25)!important;background:linear-gradient(145deg,rgba(111,73,33,.24),rgba(50,44,65,.28))!important}
body.v340-role-page .wizard-step[data-step="5"] .quick-context-grid>div:nth-child(4){border-color:rgba(81,218,166,.24)!important;background:linear-gradient(145deg,rgba(28,98,75,.24),rgba(23,49,67,.28))!important}
body.v340-role-page .wizard-step[data-step="5"] .scenario-card:nth-child(4n+1){border-color:rgba(75,195,242,.19)!important;background:linear-gradient(145deg,rgba(25,69,101,.22),rgba(17,35,61,.27))!important}
body.v340-role-page .wizard-step[data-step="5"] .scenario-card:nth-child(4n+2){border-color:rgba(169,126,255,.18)!important;background:linear-gradient(145deg,rgba(72,52,115,.21),rgba(28,34,66,.27))!important}
body.v340-role-page .wizard-step[data-step="5"] .scenario-card:nth-child(4n+3){border-color:rgba(255,174,88,.18)!important;background:linear-gradient(145deg,rgba(92,61,31,.20),rgba(39,37,59,.27))!important}
body.v340-role-page .wizard-step[data-step="5"] .scenario-card:nth-child(4n+4){border-color:rgba(78,214,163,.18)!important;background:linear-gradient(145deg,rgba(27,83,66,.20),rgba(22,39,59,.27))!important}

/* 9. Step 6 — the review becomes scannable by data type. */
body.v340-role-page .wizard-step[data-step="6"] .review-grid{gap:7px!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row{border-width:1px!important;border-style:solid!important;border-radius:13px!important;padding:11px 13px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(1){border-color:rgba(81,205,235,.19)!important;background:rgba(39,126,151,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(2){border-color:rgba(167,126,255,.20)!important;background:rgba(100,70,166,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(3){border-color:rgba(72,200,242,.20)!important;background:rgba(39,124,170,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(4){border-color:rgba(95,151,255,.20)!important;background:rgba(53,82,154,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(5){border-color:rgba(181,129,255,.20)!important;background:rgba(100,65,164,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(6){border-color:rgba(78,214,184,.20)!important;background:rgba(35,121,100,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(7){border-color:rgba(255,180,82,.21)!important;background:rgba(133,88,37,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(8){border-color:rgba(81,219,166,.20)!important;background:rgba(37,126,93,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(9){border-color:rgba(93,174,255,.20)!important;background:rgba(50,95,157,.10)!important}
body.v340-role-page .wizard-step[data-step="6"] .review-row:nth-child(10){border-color:rgba(242,132,181,.19)!important;background:rgba(125,62,95,.09)!important}
body.v340-role-page .wizard-step[data-step="6"] .check-line{border-color:rgba(80,220,163,.24)!important;background:linear-gradient(145deg,rgba(31,100,76,.18),rgba(22,49,64,.23))!important}

/* Mobile: preserve readability, no horizontal squeeze. */
@media(max-width:820px){
  body.v340-role-page .wizard-shell{width:calc(100% - 18px)!important;padding-top:12px!important}
  body.v340-role-page .wizard-intro{display:block!important;padding:18px!important}
  body.v340-role-page .wizard-intro>h1{font-size:30px!important;max-width:none!important;margin:7px 0 10px!important}
  body.v340-role-page .wizard-intro>p:not(.eyebrow):not(.mode-hint){font-size:12.5px!important;line-height:1.55!important}
  body.v340-role-page .wizard-intro>.config-mode-switch{display:grid!important;margin-top:16px!important;gap:8px!important}
  body.v340-role-page .wizard-intro>.v340-support-strip{display:grid!important;grid-template-columns:auto 1fr!important;margin-top:12px!important}
  body.v340-role-page .vacancy-description-impact{grid-template-columns:1fr!important;gap:4px!important}
  body.v340-role-page .vacancy-description-impact b{white-space:normal!important}
  body.v340-role-page .wizard-step[data-step="4"] .field-grid.two{grid-template-columns:1fr!important}
}