/*
  The employer welcome on employers?a=events (class.employer_welcome.php, pilot): the hero is
  the surveys / availability one (svy_ classes, css/employer_surveys.css) — only the Getting
  up and running card under it lives here. px throughout (a rem is 10px on this site).
*/

.ew_hero .svy_hero_art_wrap { padding: 30px 0 20px; }
.ew_hero .svy_intro_art { max-width: 560px; }
.ew_hero .svy_intro_buttons a.svy_intro_button { text-decoration: none; display: inline-block; }

/* ---- the card ---- */

.ew_steps
{
  margin: 18px 0 24px;
  background: #ffffff;
  border: 1px solid #dfe8ea;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(16, 38, 52, .05);
  overflow: hidden;
}
.ew_steps_head
{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 14px;
}
.ew_steps_title
{
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  color: #16211f;
}
.ew_steps_sub { margin-top: 4px; color: #6b7a7e; font-size: 14px; }
.ew_steps_count
{
  font-family: 'Alegreya Sans', sans-serif;
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  color: darkcyan;
  white-space: nowrap;
}
.ew_steps_count span { font-size: 18px; color: #9aa6aa; font-weight: 500; }

.ew_bar { height: 6px; background: #e6eeef; margin: 0 26px; border-radius: 3px; overflow: hidden; }
.ew_bar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1db4b4, #3fb58a 60%, #9b2fb0); transition: width .4s; }

/* ---- a row a step ---- */

.ew_step_list { padding: 8px 10px 12px; }
.ew_step
{
  display: grid;
  grid-template-columns: 34px 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
}
.ew_step + .ew_step { margin-top: 2px; }
.ew_step.ew_next
{
  background: linear-gradient(110deg, #edfbfa 0%, #ffffff 60%, #f5edfb 100%);
  border-color: #cfe9e8;
}
.ew_step.ew_done { opacity: .62; }

.ew_step_mark
{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #cfd8d8;
  background: #ffffff;
  color: #6b7a7e;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ew_next .ew_step_mark { border-color: darkcyan; color: darkcyan; }
.ew_done .ew_step_mark { border-color: #1a7f37; background: #1a7f37; color: #ffffff; }

.ew_step_icon
{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e3f1f2;
  color: #0f7777;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ew_next .ew_step_icon { background: darkcyan; color: #ffffff; }

.ew_step_text { min-width: 0; }
.ew_step_title { font-weight: 700; font-size: 16px; color: #16211f; line-height: 1.3; }
.ew_step_copy { margin-top: 2px; color: #58696b; font-size: 13.5px; line-height: 1.45; }
.ew_optional
{
  display: inline-block;
  margin-left: 6px;
  vertical-align: 2px;
  background: #f1f4f5;
  color: #6b7a7e;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 10px;
}

.ew_step_action { white-space: nowrap; }
.ew_action.btn
{
  background: #ffffff;
  border: 1px solid #c9d6d8;
  color: #16211f;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 14px;
  box-shadow: none;
  text-decoration: none;
}
.ew_action.btn:hover, .ew_action.btn:focus { border-color: darkcyan; color: darkcyan; background: #f4f9f9; }
.ew_next .ew_action.btn { background: darkcyan; border-color: darkcyan; color: #ffffff; }
.ew_next .ew_action.btn:hover, .ew_next .ew_action.btn:focus { background: #007a7a; border-color: #007a7a; color: #ffffff; }
.ew_pill_done
{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1a7f37;
  font-size: 13px;
  font-weight: 700;
}

/* phone: the action drops under the words */
@media (max-width: 640px)
{
  .ew_steps_head { padding: 18px 16px 12px; }
  .ew_steps_title { font-size: 22px; }
  .ew_bar { margin: 0 16px; }
  .ew_step_list { padding: 8px 6px 10px; }
  .ew_step { grid-template-columns: 30px 40px minmax(0, 1fr); gap: 10px; padding: 12px 10px; }
  .ew_step_mark { width: 26px; height: 26px; font-size: 12px; }
  .ew_step_icon { width: 40px; height: 40px; font-size: 18px; }
  .ew_step_action { grid-column: 3; }
  .ew_step.ew_done .ew_step_action { display: none; }
}

/* ---- the nav's Home while the list has open steps (employer_welcome::open_count) ----
   the rail item stands out from its neighbours - white, bold, a soft brand tint - and its badge
   is the count in the list's own gradient; the phone's Home tab carries the same count on its
   icon, the way the Messages tab carries unread */
.employer_sidebar .ssb_item_todo { color: #fff; font-weight: 700; background: rgba(29, 180, 180, .14); }
.employer_sidebar .ssb_item_todo .ssb_icon { color: #7fd6d6; }
.employer_sidebar .ssb_item_todo:hover, .employer_sidebar .ssb_item_todo:focus { background: rgba(29, 180, 180, .22); }
.employer_sidebar .ssb_item_todo.ssb_item_active { background: rgba(29, 180, 180, .22); box-shadow: inset 3px 0 0 #1db4b4; }
.ssb_badge.ew_todo_badge
{
  background: linear-gradient(135deg, #1db4b4, #3fb58a 70%);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(29, 180, 180, .25);
}
/* not footer_message_counter: the inbox poll rewrites every one of those with the unread count */
.lower_navbar_preview .lower_nav_td div.ew_todo_badge_tab, .ew_todo_badge_tab
{
  position: absolute;
  top: -7px;
  right: -12px;
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1db4b4, #3fb58a 70%);
  color: #fff !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}